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 =)
Related
(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 am creating a table and adding and as follows:
var table = document.getElementById("resumes_table");
var rowcount = document.getElementById("resumes_table").rows.length;
var row = table.insertRow(rowcount);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell2.id = "a"+rowcount;
cell2.name = "a"+rowcount;
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4)
I am adding id and name to my (cell) as follows:
cell2.id = "a"+rowcount;
cell2.name = "a"+rowcount;
Where id is working while cell2.name = "a"+rowcount; not working.
Table cells (<td>) do not have a name property.
You can check the full list of properties for the table cell element here
You can check that by doing:
console.log(cell2.hasOwnProperty('name'));
Or:
console.log(cell2.name);
Even though you are able to do cell2.name = "a"+rowcount; and probably if you check the cell2 variable after setting the name you will see the property set, when the browser renders the element, it won't take the name property into account because it's not part of the element's specs.
You can't set the "name" properties of a <td> element because <td> don't have that kind of properties. Just check on w3cschools website.
Just a hint. Actually can't add a comment so I have to insert an answer. When you insert a question, you have to use "Code Sample" to insert code as <td> or when the question is published <td> will become invisible.
My doubt is quite confusing. I'll break it down as simple as possible.
In HTML page I have a table inside a forEach loop. So multiple tables will occur. But all the tables has same header but rest of the values are different. So I need to set the table header in JavaScript to reduce the HTML code.
function myFunction()
{
var table = document.getElementById("myTable");
var header = table.createTHead();
var row = header.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML = "<b>Resource Name</b>";
}
This is the code I have used. But id doesn't repeat again. So the table header is only coming for first table.
Any solutions or alternatives for id ?
var tables = document.getElementsByTagName("table");
var len = tables.length, i=0, header, row, cell;
for(;i<len;i++){
header = tables[i].createTHead();
row = header.insertRow(0);
cell = row.insertCell(0);
cell.innerHTML = "<b>Resource Name</b>";
}
http://fiddle.jshell.net/4AmmP/1/
Edit (Using class)
Add class to the tables you want to get affected (say class="myTableClass") and use the below edited code
var tables = document.getElementsByTagName("table");
var len = tables.length, i=0, header, row, cell;
for(;i<len;i++){
/* Check if the table has the class "myTable" */
if(tables[i].className === "myTable") {
header = tables[i].createTHead();
row = header.insertRow(0);
cell = row.insertCell(0);
cell.innerHTML = "<b>Resource Name</b>";
}
}
http://fiddle.jshell.net/4AmmP/2/
I'm delevoling an app with phonegap for android and I'm trying to make a FOR loop in javascript with html table rows. I tried using the document.write but all of the content in the page desapears, show just what it's in the document.write.
The code I have is this one:
<table id="hor-minimalist-b">
<script language=javascript>
for (var i=0; i<3; i++) {
document.write('<tr>');
document.write('<td>');
document.write('<input type="text" name="valor" id="valor" value="key' + i'">');
document.write('</td>');
document.write('</tr>');
}
</script>
</table>
Thanks.
It's because you are just putting text in the page, you need to "create" the element and append them to the table.
You can do it this way:
<table id="hor-minimalist-b"><thead></thead><tbody></tbody></table>
<script language="javascript">
var table = document.getElementById('hor-minimalist-b'); // get the table element
var tableBody = table.childNodes[1]; // get the table body
var tableHead = table.childNodes[0]; // get the table head
for (var i=0; i<3; i++) {
var row = document.createElement('tr'); // create a new row
var cell = document.createElement('td'); // create a new cell
var input = document.createElement('input'); // create a new input
// Set input properties
input.type = "text";
input.id = "valor"; // It's not a good idea (to have elements with the same id..)
input.name = "valor";
input.value = "key" + i;
cell.appendChild(input); // append input to the new cell
row.appendChild(cell); // append the new cell to the new row
tableBody.appendChild(row); // append the row to table body
}
</script>
insertRow() and insertCell() will probably work too, but I did not test it yet
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.