I have a dynamic table created using JavaScript my dataArray consist of many information including drive file downloadable link example :-
dataArray[i][4] has google file dowanload link = drive.google.com/uc?export=download&id=1YH6xxxxxxxxxxxxxxxphUl
Now I can't create a downloadable link using the url field of my dataset I tried following:-
function getreferData(dataArray)
{
var ray = dataArray.splice(0,1)
let table = document.getElementById('thead1');
var tableHeaderRow = document.createElement("tr");
table.appendChild(tableHeaderRow);
for(i=0;i<ray[0].length;i++){
var tableHeader = document.createElement("th");
tableHeaderRow.appendChild(tableHeader);
tableHeader.innerHTML = ray[0][i];
}
let tbody = document.getElementById('perf');
for (var i=0;i<dataArray.length;i++)
{
let row = document.createElement("tr")
for (var j=0;j<dataArray[i].length;j++)
{
if (j==4)
{
let col = document.createElement("td")
var a = document.createElement("a");
a.href = "/'"+dataArray[i][j]+"/'";
var node = document.createTextNode("Click here")
a.appendChild(node)
col.appendChild(a)
row.appendChild(col)
}
else
{
let col = document.createElement("td")
col.innerText = dataArray[i][j]
row.appendChild(col)
}
}
tbody.appendChild(row);
}
image of my array logs:-
I was able to get it worked by Adding "https://" in my link drive.google.com/uc?export=download&id=1YH6xxxxxxxxxxxxxxxphUl.
btnUpdate = document.createElement("BUTTON");
var t = document.createTextNode("Update");
btnUpdate.id = 'update0';
btnUpdate.appendChild(t);
tabCell.appendChild(btnUpdate);
I have a simple line of code where I have created a button with my javascript. How do I access this button through the same javascript file? I want to add onClick feature to it.
document.getElementById("update0").onclick = edit_row(0);
I tried doing so by adding the above line of code, but now it won't display the table but straight away jumps to the edit_row() function.
Edit:
function showCustomer() {
var obj, dbParam, xmlhttp, myObj, x, txt = "",tabCell;
var btnUpdate;
obj = { "table":"Successful", "limit":20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myObj = JSON.parse(xmlhttp.responseText);
console.log(myObj);
var col = [];
for (var i = 0; i < myObj.length; i++) {
for (var key in myObj[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
key="Update";
col.push(key);
console.log(col);
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < myObj.length; i++) {
tr = table.insertRow(-1);
tabCell = null;
for (var j = 0; j < col.length-1; j++) {
tabCell = tr.insertCell(-1);
tabCell.innerHTML = myObj[i][col[j]];
}
tabCell = tr.insertCell(-1);
btnUpdate = document.createElement("BUTTON");
var t = document.createTextNode("Update");
btnUpdate.id = 'update'+i;
btnUpdate.appendChild(t);
tabCell.appendChild(btnUpdate);
}
tr = table.insertRow(-1);
tabCell = null;
for (var j = 0; j < col.length-1; j++) {
tabCell = tr.insertCell(-1);
tabCell.innerHTML = " ";
}
tabCell = tr.insertCell(-1);
var btn = document.createElement("BUTTON");
var t = document.createTextNode("Add Row");
btn.appendChild(t);
tabCell.appendChild(btn);
document.getElementById("update0").addEventListener = function (){
edit_row(0);
};
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
};
xmlhttp.open("POST", "http://localhost:8090/Vaccine", true);
xmlhttp.setRequestHeader("Content-type", "application/JSON");
xmlhttp.send("x=" + dbParam);
}
function edit_row(no)
{
alert("HELLO");
}
With this line :
document.getElementById("update0").onclick = edit_row(0);
You are not "attaching" the click event to the edit_row function. You're setting the onclick property with the result of the edit_row(0) invokation.
Also, don't use the onclick property.
Use the addEventListener function instead.
document.getElementById("update0").addEventListener("click", function () {
edit_row(0);
});
If you need a reason : by overwriting the onclick property, you could be disabling any other click event listener on your elements. By using addEventListener(), you can have several events listener on the same element/event couple.
And you can do this right after you created the button. You don't need to get it by its id later.
Your code would look like this :
btnUpdate = document.createElement("BUTTON");
var t = document.createTextNode("Update");
btnUpdate.id = 'update0';
btnUpdate.appendChild(t);
btnUpdate.addEventListener("click", function () {
edit_row(0);
});
You have to do that in callback of on click event. If you inline, it executes directly when javascript reading your code.
document.getElementById("update0").onclick = function (){
edit_row(0);
};
How do I access this button through the same javascript file?
The same way you've been accessing it all along.
It is stored in the btnUpdate variable. Use that.
but now it won't display the table but straight away jumps to the edit_row() function.
That is because you are calling edit_row and setting its return value as the click handler.
Since you want to pass arguments to it, the easiest thing to do is to create a new function.
function edit_row_first_argument_0 () {
edit_row(0);
}
button.addEventListener("click", edit_row_first_argument_0);
(You can use an anonymous function expression, I use the verbose approach above for clarity).
Try this:
btnUpdate = document.createElement("BUTTON");
var t = document.createTextNode("Update");
btnUpdate.id = 'update0';
btnUpdate.appendChild(t);
tabCell.appendChild(btnUpdate);
btnUpdate.addEventListener("click", (e) => {
// this linked to btnUpdate
// Here make whatever you want
// You can call edit_row now
edit_row(0)
})
It seems that your button is not in the DOM yet, so you are not able to find it with document. You can use the variable btnUpdate if it is in the same file like btnUpdate.onclick = function() {}, or using addEventListenerlike btnUpdate.addEventListener('click', function() {}).
Also, it seems you are executing the edit_row(0) function. You need to put it inside a function like
btnUpdate.addEventListener('click', function() {
edit_row(0);
})
You call the function when you have () at the end so
document.getElementById("update0").onclick = edit_row(0);
will immediately call edit_row
Why not do this instead:
btnUpdate = document.createElement("BUTTON");
var t = document.createTextNode("Update");
btnUpdate.id = 'update0';
btnUpdate.onclick=function() {
edit_row(this.id.replace("update","")); // or use a data-attribute
}
btnUpdate.appendChild(t);
tabCell.appendChild(btnUpdate);
or use event delegation:
Native JS equivalent to jquery delegation
My goal is to have the appendChild(detail) appear after the appendChild(image) but it doesn't show up in the browser.
document.getElementById("myBtn2").addEventListener("click", hey);
function hey(){
for (i = 1; i < radio.length; i++){
f = radio[i].image ;
var item = document.createElement('div');
item.id = "box";
item.className = "dell";
item.style.height = "140px";
detail = document.createElement('div');
detail.className = "space";
image = document.createElement('img');
image.id = "pic";
image.className = "dell3";
image.setAttribute("src", f);
document.getElementById('case').appendChild(item).appendChild(image).appendChild(detail);
}
}
appendChild() returns the appended node. It's not chainable in the way that you think. In your code, item is appended to 'case', image to item and detail to image. Since image is an <img> element that should not have children, detail is not displayed.
The solution is to append each item separately to a document fragment, then append the document fragement to case.
var frag = document.createDocumentFragment();
var item = frag.appendChild(document.createElement('div'));
item.id = "box";
item.className = "dell";
item.style.height = "140px";
var detail = frag.appendChild(document.createElement('div'));
detail.className = "space";
var image = frag.appendChild(document.createElement('img'));
image.id = "pic";
image.className = "dell3";
image.setAttribute("src", f);
document.getElementById('case').appendChild(frag);
Note you probably want var keywords on the other variable assignments too as otherwise you'll create globals for each one implicitly. I've added these to the example changes I made. There are other optimisations you might want to make too, such as not doing the document.getElementById() lookup each time you loop (you can store it as a var outside of the loop).
I'm trying to generate a table dynamically using a userscript.
var divWrap = document.createElement('div');
divWrap.style.fontFamily = "sans-serif";
divWrap.style.width = "100%";
var spanTitle = document.createElement('span');
spanTitle.style.marginRight = "auto";
spanTitle.style.marginLeft = "auto";
spanTitle.style.fontSize = "1.5em";
spanTitle.innerHTML = "Countdown";
divWrap.appendChild(spanTitle);
var createTable = document.createElement('table');
createTable.style.marginLeft = "auto";
createTable.style.marginRight = "auto";
createTable.style.width = "50%";
createTable.id = "cdn_table"
divWrap.appendChild(createTable);
createTable.appendChild(addRow("test", "12d"));
createTable.appendChild(addRow("test2", "24h"));
mainDiv.getElementsByTagName('span')[0].appendChild(divWrap);
function addRow(rName, rValue) {
console.log(rName + ": " + rValue);
var row = document.createElement('tr');
var tName = document.createElement('td');
tName.innerHTML = rName;
var tValue = document.createElement('td');
tValue.innerHTML = rValue;
row.appendChild(tName);
row.appendChild(tValue);
return row;
}
The problem is that all elements are rendered in one line like this: http://i.imgur.com/MjMtdDg.png
Is there some css value I'm missing? Or something else? I want to insert simple title and table in that thumbnail with Scriptish in Firefox..
Tables have their own interface for adding rows/cells.
var t = document.createElement("table");
var r = t.insertRow(-1);
var c = r.insertCell(-1);
c.innerHTML = "Foo";
c = r.insertCell(-1);
c.innerHTML = "Bar";
document.body.appendChild(t);
http://jsfiddle.net/tQWm8/1/
I have a table where I can add images onclick. The table is created dynamically from a form. I have tried to save the table to local storage, but I am getting a circular reference issue. I have read this Example of a circular reference in Javascript? but I am a complete novice and struggling to understand. Can you point it out to me?
function makeChart() {
var table = document.createElement('table'),
taskName = document.getElementById('taskname').value,
header = document.createElement('th'),
numDays = document.getElementById('days').value, //columns
howOften = document.getElementById('times').value, //rows
row,
r,
col,
c;
var cel = null;
var myImages = new Array();
myImages[0] = "http://www.olsug.org/wiki/images/9/95/Tux-small.png";
myImages[1] = "http://a2.twimg.com/profile_images/1139237954/just-logo_normal.png";
var my_div = document.createElement("div");
my_div.id = "showPics";
document.body.appendChild(my_div);
var newList = document.createElement("ul");
my_div.appendChild(newList);
if (taskName == '' || numDays == '') {
alert('Please enter task name and number of days');
}
if (howOften == '') {
howOften = 1;
}
if (taskName != '' && numDays != '') {
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src = myImages[i];
allImages.onclick = function (e) {
if (sel !== null) {
sel.src = e.target.src;
my_div.style.display = 'none';
sel.onclick = null;
sel = null;
}
};
var li = document.createElement('ul');
li.appendChild(allImages);
newList.appendChild(li);
}
my_div.style.display = 'none';
header.innerHTML = taskName;
table.appendChild(header);
function addImage(col) {
var img = new Image();
img.src = "http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png";
col.appendChild(img);
img.onclick = function () {
my_div.style.display = 'block';
sel = img;
};
}
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
addImage(col);
}
}
document.getElementById('holdTable').appendChild(table);
document.getElementById('createChart').onclick = null;
console.log(table);
localStorage.setItem(name, JSON.stringify(table));
console.log( JSON.parse( localStorage.getItem( table ) ) );
}
}
Any DOM element holds a reference to the parentNode and to the document, which you can't stringify. In fact each element holds a link to it parent which holds links to its childs.
You can't apply JSON.stringify to a DOM element.
If you really want to save your table, you could save its HTML using table.innerHTML. We could propose other solutions (there even are specific stringify implementations able to produce JSON from circular elements or DOM nodes). But we'd need to know why you try to save a table in localStorage.