It occurs in this:
for(var i = 0; i<phoneNums.length; i++)
{
var lines = document.createElement('tr');
var number = document.createElement('td');
number.innerHTML = phoneNums[i];
var minutes = document.createElement('td');
minutes.innerHTML = minutesUsed[i];
var plan = document.createElement('td');
plan.innerHTML = plans[i];
var charges = document.createElement('td');
charges.innerHTML = charge[i];
document.getElementById('theTable').appendChild(lines);
lines.appendChild(number);
lines.appendChild(minutes);
lines.appendChild(plan);
lines.appendChild(charges);
}
Specifically at:
document.getElementById('theTable').appendChild(lines);
<table id = 'theTable'>
</table>
<script type = 'text/javascript'>
populateTable();
</script>
I'm trying to create a function that adds tr and td and the values to a table.
You probably are running this script before "theTable" exists in your document. Make sure that this script occurs below your table with id="theTable", or that it is run in an event handler that occurs after the table exists.
This means that you do not have an element in your DOM with an id of "theTable". Somewhere in your html you should have something like:
<table id="theTable">...
Alternatively, as others have also mentioned, this element may not have been loaded into the DOM before your script executes.
Related
I am facing some issues while trying to pass JSON object as a parameter to function!
but on that function, while consoling log the data I am getting [object:object].
Here is my code:
function buildTable(data) {
var table = document.getElementById("myTable");
table.innerHTML = "";
for (var i = 0; i < data.length; i++) {
var row = `<tr class="item-id-${data[i].id}"> <td>${data[i].name}</td> <td>${data[i].audio_muted}</td> <td>${data[i].video_muted}</td> <td><button id="audio_handle" class="btn btn-primary" onclick="handleMembers('${data[i]}')">Video</button></td>`;
table.innerHTML += row;
}
}
function handleMembers(data) {
console.log("data = >", data); //= [object:object]
}
The issue is when I am calling handle function from the button inside template literal string I m getting [object:object] as output
Where I am going wrong?
I fixed a few points in the following snippet and added some HTML and some sample data:
// some sample data for illustration:
const data=[{id:1,name:"Harry",audio_muted:1,video_muted:1},{id:2,name:"Ron",audio_muted:1,video_muted:0},{id:3,name:"Hermiony",audio_muted:0,video_muted:1},{id:4,name:"Ginny",audio_muted:0,video_muted:1}];
const tbl=document.getElementById("myTable");
tbl.innerHTML = data.map((itm,i)=>`<tr class="item-id-${itm.id}"> <td>${itm.name}</td> <td>${itm.audio_muted}</td> <td>${itm.video_muted}</td> <td><button data-id="${i}" class="btn btn-primary">Video</button></td>`).join("\n")
tbl.addEventListener("click",ev=>{
if (ev.target.tagName==="BUTTON")
console.log("data = >", data[ev.target.dataset.id]) ; //= [object:object]
})
<table id="myTable"></table>
As #Quentin already mentioned you should not include JavaScript code within a template string. This gets too complicated to read and to maintain. Instead I used a delegated event-handler on the table itself to listen for the click on the button elements. By doing all this there was no need anymore for the two named functions.
Another thing that comes to my mind is: Never use element.innerHTML += ... inside a for loop as this will potentially become really slow. It is generally better to assemble the whole HTML string in one go and then assign it to the innerHTML property.
I think it's the wrong approach to do that. You should try to create the element using the DOM api and add the eventListener to the selected element, something like:
function buildTable(data) {
const table = document.getElementById("myTable");
for(let d of data) {
const tr = document.createElement("tr");
const td1 = document.createElement("td");
td1.textContent = d.name;
const td2 = document.createElement("td");
td2.textContext = d.audio_muted;
const td3 = document.createElement("td");
td3.textContent = d.video_muted;
const tdButton = document.createElement("button");
tdButton.classList.add("btn", "btn-primary");
tdButton.addEventListener("click", () => handleMembers(d));
tr.appendChild(td1)
tr.appendChild(td2)
tr.appendChild(td3)
tr.appendChild(tdButton);
table.appendChild(tr)
}
}
(This is my first question here and I am new to programming)
I am stuck on a problem and I tried to take something from here:
http://jsfiddle.net/4pEJB/
Dynamically generated table - using an array to fill in TD values
The function I created receive two vectors and creates a table with 2 columns, one for each vector, and lines = vector.length.
The function works fine, it seems to create the table as I need, but it doesn't show the table created on the browser screen after button click. By using some 'alert()' on the for loops I was able to verify that it uses the correct data.
In fact, when the button is clicked, it calls another function that processes some data and passes two vectors on this function I am showing here, but this part works well.
Here is the HTML part:
<div class="tableDiv">
<input type="button" onclick="createtable([1,3,5,7,9],[2,4,6,8,10])" value="Show data">
</div>
And here is the JavaScript part:
function createtable(vet_1,vet_2){
var tableDiv = document.getElementById("tableDiv");
var table = document.createElement("table");
var tableBody = document.createElement('tbody');
for (var r=0;r<vet_1.length;r++){
var row = document.createElement("tr");
for (var c=0;c<2;c++){
var cell = document.createElement("td");
if (c==0){cell.appendChild(document.createTextNode(vet_1[r]));}
else if(c==1){cell.appendChild(document.createTextNode(vet_2[r]));}
row.appendChild(cell);
}
tableBody.appendChild(row);
}
tableDiv.appendChild(table);
}
When the function finishes the table feed, it stops on tableDiv.appendChild(table);
Any advice or suggestions will be greatly appreciated! (I speak portuguese, I am sorry for some errors)
EDIT: it's possible to avoid the increment on the number of table rows that occurs every time we click the button (the solution provided generates one new table under the previous table). To solve this, I just added this line on the beggining of the function code (need to put the button outside the div and let the div empty, otherwise it will hide the button):
document.getElementById("tableDiv").innerHTML = "";
you are capturing by id, but you set up a class.chang it to id
<div id="tableDiv">
and append the tableBody into table.You're populating the table body with rows, but never appended the body into the table element.
function createtable(vet_1,vet_2){
var tableDiv = document.getElementById("tableDiv");
var table = document.createElement("table");
var tableBody = document.createElement('tbody');
for (var r=0;r<vet_1.length;r++){
var row = document.createElement("tr");
for (var c=0;c<2;c++){
var cell = document.createElement("td");
if (c==0){cell.appendChild(document.createTextNode(vet_1[r]));}
else if(c==1){cell.appendChild(document.createTextNode(vet_2[r]));}
row.appendChild(cell);
}
tableBody.appendChild(row);
}
table.appendChild(tableBody) // append tableBody into the table element
tableDiv.appendChild(table);
}
<div id="tableDiv">
<input type="button" onclick="createtable([1,3,5,7,9],[2,4,6,8,10])" value="Show data">
</div>
You try to append the var table to the tableDiv but the var table is stil empty.
Before append the tableBody to the var table and it will work.
Use id instead of class in your HTML Markup
<div id="tableDiv">
and then use the following code.
function createtable(vet_1,vet_2){
var tableDiv = document.getElementById("tableDiv");
var table = document.createElement("table");
var tableBody = document.createElement('tbody');
for (var r=0;r<vet_1.length;r++){
var row = document.createElement("tr");
for (var c=0;c<2;c++){
var cell = document.createElement("td");
if (c==0){cell.appendChild(document.createTextNode(vet_1[r]));}
else if(c==1){cell.appendChild(document.createTextNode(vet_2[r]));}
row.appendChild(cell);
}
tableBody.appendChild(row);
}
table.appendChild(tableBody);
tableDiv.appendChild(table);
}
First you are accessing the div using id whereas the node is defined with a class.
Secondly, you have to append the body to the table node first, and then append the table to the div selected.
Try this code snippet to move on.
I have a script that makes a button in a table every 5 seconds.
I originally had the button made with the onclick attribute which called a function in the script. This however, gave me an error saying that the function didn't exist, and as from what I've seen on here, it has been answered but I don't know how I'd fix it in my situation. I switched it so that Javascript handles for the button click. I added attributes to the button tag to grab when the btnTeamListAction function is called. The console prints the following,
control.js:86 Uncaught TypeError: Cannot set property 'onclick' of null
at window.onload (control.js:86)
JS Snippets:
#button click handler
btnTeamListAction.onclick = function(){
var id = this.getAttribute("data-team-id");
var isRedo = this.getAttribute("data-is-redo");
teamListSelect(id,isRedo);
}
#the function that creates the buttons
function appendTeamTable(id,name,finished){
var finished_txt;
var action_content;
if(finished == 1){
finished_txt = "Yes";
action_content = '<button id="teams-list-action" data-team-id="'+id+'" data-is-redo="1">Retime</button>';
}
else {
finished_txt = "No";
action_content = '<button id="teams-list-action" data-team-id="'+id+'" data-is-redo="0">Time</button>';
}
var tr = document.createElement('tr');
tr.innerHTML ='<td>'+ id +'</td><td>'+ name +'</td><td>'+ finished_txt +'</td><td>'+ action_content +'</td>'
teamTable.appendChild(tr);
var btnTeamListAction = document.getElementById("teams-list-action");
btnTeamListAction.onclick = function(){
console.log("ActionClicked");
var id = this.getAttribute("data-team-id");
var isRedo = this.getAttribute("data-is-redo");
teamListSelect(id,isRedo);
}
}
I've tried browsing this form for this error and have found many related questions but not for this particular case with the button being created by JS itself.
Please ask if you need the full script or HTML, Thanks!
function appendTeamTable(id,name,finished){
var finished_txt;
var action_content= document.createElement("a");
var btn = document.createElement("button");
btn.setAttribute("id","teams-list-action");
btn.setAttribute("data-team-id",id);
if(finished == 1){
finished_txt = "Yes";
var t = document.createTextNode("Retime");
btn.setAttribute("data-is-redo","1");
}
else {
finished_txt = "No";
var t = document.createTextNode("Time");
btn.setAttribute("data-is-redo","0");
}
btn.appendChild(t);
btn.addEventListener("click",function(){
var id = this.getAttribute("data-team-id");
var isRedo = this.getAttribute("data-is-redo");
teamListSelect(id,isRedo);
});
action_content.appendChild(btn);
var tr = document.createElement('tr');
var td = document.createElement('td');
td.appendChild(action_content);
tr.innerHTML ='<td>'+ id +'</td><td>'+ name +'</td><td>'+ finished_txt +'</td>'
tr.appendChild(td);
teamTable.appendChild(tr);}
I looked at the post here and took the idea from the second answer and put a event handler on the table itself instead of the buttons individually. It's works like a charm now. Thanks all three of you for attempting to look through my seriously messed up code! :)
I want to add a select (dropdown) to every row in my table.
The table is created using Javascript and has dynamic content imported from xml files using JQuery.
I managed to import all content successfully, however the dropdowns are displayed in the last row only.
I would appreciate if you can assist me to have the dropdown in every row.
Below is a code extract with blank selects only (the imported content is stored in those elements). All outputs such as "row " is for testing purpose only. "Numrows" are for testing purpose as well.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8" >
<title>table select test</title>
</head>
<body>
<table id="scrolltable">
</table>
<script type="text/javascript">
var tabbody = document.getElementById("scrolltable");
var types = document.createElement("select");
var units = document.createElement("select");
parseTable(3, types, "row ", units);
function parseTable(numrows, types, limits, units) {
for (i = 0; i < numrows; i++) {
var row = document.createElement("tr");
var cell1 = document.createElement("td");
cell1.style.width="300px";
cell1.appendChild(types);
row.appendChild(cell1);
var cell2 = document.createElement("td");
cell2.innerHTML = limits + i;
cell2.style.width = "100px";
row.appendChild(cell2);
var cell3 = document.createElement("td");
cell3.appendChild(units);
row.appendChild(cell3);
tabbody.appendChild(row);
}
}
</script>
</body>
</html>
types and units are defined once, so they are single elements. So they are moved to where you last called appendChild. If you want to see what happens, try adding alert(''); before ending your for loop and see it in action for every row.
If you want to add it in every row then you need new instances at each itterration:
function parseTable(numrows, types, limits, units) {
for (i = 0; i < numrows; i++) {
var row = document.createElement("tr");
var cell1 = document.createElement("td");
cell1.style.width="300px";
types = document.createElement("select");
cell1.appendChild(types);
row.appendChild(cell1);
var cell2 = document.createElement("td");
cell2.innerHTML = limits + i;
cell2.style.width = "100px";
row.appendChild(cell2);
var cell3 = document.createElement("td");
units = document.createElement("select");
cell3.appendChild(units);
row.appendChild(cell3);
tabbody.appendChild(row);
}
}
Without a minimum example, it may be difficult to pinpoint the issue, but my guess is:
You create the types and units elements only before your loop, so you are appending the same objects over and over, and each time you append one of them to a cell, you take it from the original cell and put it into the new one. Thats what "appendChild" does, it doesn't clone the element, it uses the same one (http://www.w3schools.com/jsref/met_node_appendchild.asp).
If you create a new select element in every step of your for, you should be fine =)
The function simply injects new rows into an empty table when the function is called.
it would seem that since the <td> class gets assigned properly, that the <tr> would also get assigned... but it doesn't!
var newRow = document.createElement("tr");
for (data in dataArray)
{
var newName = document.createElement("td");
newName.className = classNames[data];
newName.innerHTML = dataArray[data];
newRow.appendChild(newName);
counter++;
}
document.getElementById("capturedData").appendChild(newRow);
var newRow2 = document.createElement("tr");
newRow2.class = "hiddenRow";
for (data in dataArray)
{
var newData = document.createElement("td");
var newDataField = document.createElement("input");
newDataField.type = "hidden";
newDataField.name = "name" + data;
newDataField.value = dataArray[data];
newData.class = classNames[data];
newData.value = dataArray[data];
newData.appendChild(newDataField);
newRow2.appendChild(newData);
}
which is really weird. All the newly added <td> elements have their classes assigned and they show up in the DOM. But the <tr> elements don't accept the class assignment and in the DOM they have no class.
Why is this? I've read about the purported asynchronicity of script execution, but surely this can't be the case, it would defeat the purpose, no?
DOM elements have no property class, because it is a reserved keyword. You are looking for className:
newRow2.className = "hiddenRow";
Same for the cell (newData). It works for your other cell because you are using className already:
newName.className = classNames[data];
Use only className, not class . There is no class-property in <TR>.