Awhile back, I found the following javascript function that allows you to dynamically add a row to a table:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
Does anyone, that actually has javascript experience (cause I have almost none) that could write a fix that will skip over the <th> tags?
Here's the part of the table I don't want to be affected:
<table id="scheduler">
<tr>
<th scope="col">Engineer</th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
My problem is that when I have the <th> tags in, the header row ends up being the row that gets "cloned", not the row that just has <td> tags in it.
Just change the function so you can specify which row you want to duplicate (given a zero-based index).
addRow( "scheduler", 1 ); // to base it on the 2nd row
// give row number------v
function addRow(tableID, num) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
// -------------------------v
var colCount = table.rows[ num ].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
//-------------------------------v
newcell.innerHTML = table.rows[ num ].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
Try This:
function addRow(tableID){
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++)
{
var newcell = row.insertCell(i);
if(table.rows[0].cells[i].tagName != "th")
{
newcell.innerHTML = table.rows[0].cells[i].innerHTML; //alert(newcell.childNodes);
switch(newcell.childNodes[0].type)
{
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
else if(table.rows.length > 1 && table.rows[1].cells[i].tagName != "th")
{
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
switch(newcell.childNodes[0].type)
{
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}}
Related
i want to populate the select drop down(from database) based on the other select(which i am fetching from Database). i am able to achieve this dependency but only for first row.
After adding a new row, my code with dependency is not working which is because i need to pass the row id .
Kindly advise how can i pass the row id to the newly added row in html table.
html:
<select name="category[]" id="categoriesSelect[]" onchange ="loadareaa(this)">
<option value="">Select category</option>
</select>
function1:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
alert(newcell.childNodes[0].type);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
case "select":
newcell.childNodes[0].selectedIndex = count;
//newcell.childNodes[0].id = count;
break;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = count;
//newcell.childNodes[0].id = count;
break;
}
}
}
function2:
function loadareaa(x) {
var catid = x.value;
var table = document.getElementById('dataTable');
var rowCount = table.rows.length;
var subcat = document.getElementById("subcatsSelect[]");
subcat.options.length = 0;
for(var k = 0; k < rowCount; k++) {
for(var i = 0; i < subcats[catid].length; i++) {
subcat.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id)
}
}
}
How to make the middle Column to be X rather than 0.
Here is my code:
var table = document.createElement('table'), tr, td, row, cell;
for (row = 0; row < 3; row++) {
tr = document.createElement('tr');
for (cell = 0; cell < 3; cell++) {
td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = 0
}
table.appendChild(tr);
}
document.getElementById('container').appendChild(table);
<div id="container"></div>
You could add a check if the cell is 1. Then take an 'X'.
var table = document.createElement('table'),
tr, td, row, cell;
for (row = 0; row < 3; row++) {
tr = document.createElement('tr');
for (cell = 0; cell < 3; cell++) {
td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = cell === 1 ? 'X' : 0;
}
table.appendChild(tr);
}
document.getElementById('container').appendChild(table);
<div id="container">
</div>
One option is to use switch:
var table = document.createElement('table');
for (var row = 0; row < 3; row++) {
var tr = document.createElement('tr');
for (var cell = 0; cell < 3; cell++) {
var td = document.createElement('td');
//console.log(cell);
var cellText = "";
// This switch picks content based on cell order
switch(cell) {
case 0: cellText = "0"; break;
case 1: cellText = "X"; break;
case 2: cellText = "0"; break;
// Default value if cell count changes
default: cellText = "Unknown cell!";
}
// Using `new Text` ensures the value is entered as text, not HTML
// This can protect you from XSS or unexpected behavior
td.appendChild(new Text(cellText));
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById('container').appendChild(table);
<div id="container">
</div>
It's not the most maintainable solution, but good enough for simple script.
I'm dynamically creating a table using an HTML table and JavaScript Functions attatched to button clicks. I now want to take the data and store it into multidimensional array (if possible) using another button named finished. I'm having trouble even getting started with the last method to save it into array. I can't figure out how to retrieve the text data.
Here is my current HTML code.
<head>
<title>TableTest</title>
<script src="/javascript/func.js"></script>
</head>
<body>
<form>
<div id="Input">
<INPUT class="form-button" id="AddRow" type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT class="form-button" id="DeleteRow" type="button" value="Delete Row(s)" onclick="deleteRow('dataTable')" />
<INPUT class="form-button" id="Finished" type="button" value="Finished" onclick="gatherData('dataTable')" />
<table id="dataTable" border="1" style="width:200px" id="mytable" align="center" cellspacing="3" cellpadding="4">
<th>Select</th>
<th>Text1</th>
<th>Text2</th>
<th>Text3</th>
<tr>
<td><INPUT type="checkbox" name="chk"/></td>
<td><INPUT type="text" name="text1"/></td>
<td><INPUT type="text" name="txt2"/></td>
<td><INPUT type="text" name="txt3"/></td>
</tr>
</table>
</div>
</form>
</body>
Here is my JavaScript file:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 2) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
function gatherData(){
//Tests
var table = document.getElementById('dataTable');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
alert(rowCount);
alert(row);
alert(colCount);
}
I reworked TameBadger's answer to build the array by row instead of by column. I also added a check to see if the given cell has a value before referencing it. In my case, not all cells have values.
var table = document.getElementById('mainTable');
if (table === null)
return;
if (table.rows[0].cells.length <= 1)
return;
var tblData = [];
//Put a RowNumber name and values placeholder for the number of rows we have.
for (r = 0; r < table.rows.length; r++)
{
//Debug
//console.log(" row: ", r);
tblData.push({
name: "RowNumber" + r,
items: []
});
//Get the cells for this row.
var cells = table.rows[r].cells;
//Loop through each column for this row and push the value...
for (c = 0; c < cells.length; c++)
{
var inputElem = cells[c].children[0];
var tmpInputElem;
if (inputElem == null)
{
tmpInputElem = "";
}
else
{
tmpInputElem = inputElem.value
}
//Debug
//console.log(" row-cel: ", r, "-", c, " ", inputElem);
tblData[r].items.push(
{
//Comment out the type for now...
//inputType: inputElem.getAttribute('type'),
inputValue: tmpInputElem
});
}
}
//Debug
//printData(tblData);
I tried to keep it simple, and also jQuery clean, so to speak.
var data = [];
function gatherData() {
var table = document.getElementById('dataTable');
for (r = 1; r < table.rows.length; r++) {
var row = table.rows[r];
var cells = row.cells;
for (c = 0; c < cells.length; c++) {
var cell = cells[c];
var inputElem = cell.children[0];
var isInput = inputElem instanceof HTMLInputElement;
if (!isInput)
return;
var value = inputElem.value;
var isCheckbox = inputElem.getAttribute('type') == 'checkbox';
if (isCheckbox)
value = inputElem.checked;
var rowData = {};
rowData.inputType = inputElem.getAttribute('type');
rowData.inputValue = value;
data.push(rowData);
}
}
}
function startExec() {
gatherData();
for (i = 0; i < data.length; i++) {
console.log(data[i].inputType);
console.log(data[i].inputValue);
}
}
//just wait for the dom to load, and then execute the function for testing
document.addEventListener("DOMContentLoaded", startExec, false);
2nd Revision
function getData() {
var table = document.getElementById('dataTable');
if (table === null)
return;
if (table.rows[0].cells.length <= 1)
return;
var data = [];
for (l = 0; l < table.rows[0].cells.length; l++) {
data.push({
items: [],
name: "ColumnNumber" + l
});
}
for (i = 1; i < table.rows.length; i++) {
var cells = table.rows[i].cells;
for (c = 0; c < cells.length; c++) {
var inputElem = cells[c].children[0];
data[c].items.push({
inputType: inputElem.getAttribute('type'),
inputValue: inputElem.value
});
}
}
printData(data);
}
function printData(data) {
for (i = 0; i < data.length; i++) {
for (k = 0; k < data[i].items.length; k++) {
console.log(data[i].items[k].inputValue);
}
}
}
document.addEventListener("DOMContentLoaded", getData(), false);
It's great that you're starting off and doing the table manipulation yourself, and I would recommend continuing that, if you want to peak into a bigger codebase I would recommend checking out jTable's. Even though it's a jQuery plugin, you'll still be able to learn something from looking at the code structure for handling all the logic surrounding building a table according to a dataset and adding records etc.
Is this what you are looking for?
JSFIDDLE
$(document).ready(function(){
$('#Finished').click(function(){
var my_arr=[];
$('td').each(function(){
if ($(this).children().is(':checkbox') )
{
if($(this).children().prop('checked'))
{
my_arr.push($(this).children().val());
}
}else{
my_arr.push($(this).children().val());
}
})
console.log(my_arr);
})
})
I have Javascript like the following:
function addRow(table1) {
var table = document.getElementById(table1);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
}
}
}
And HTML like the following:
<input type="button" value="Insert row" onclick="addRow('table1')" />
<table id="table1" border=1>
<tr>
<td rowspan=2><input type="text" name="txt1"></td>
<td><input type="text" name="txt2"></td>
</tr>
<tr>
<td><input type="text" name="txt3"></td>
</tr>
</table>
I have a row with rowspan=2, and two rows with no rowspan. How do I write the following line so that once the user clicks the Insert Row button, three textboxes will be added into the new row?
newcell.innerHTML = table.rows[0].cells.innerHTML;
Note that in your code you have:
> newcell.innerHTML = table.rows[0].cells.innerHTML;
I think you mean:
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
But anyway, have you considered using a cloned row instead? e.g. something like the following (untested):
function addRow(tableID) {
var table = document.getElementById(tableID);
var row = table.rows[0].cloneNode(true);
var inputs = row.getElementsByTagName('input');
var i = inputs.length;
while (i--) {
if (inputs[i].type = 'text') {
inputs[i].vaule = '';
// Might want to change other properties too
}
}
table.tBodies[0].appendChild(row);
}
We have a specific functionality where we need to add dynamic rows. In each of the row for the third column there is a button to add combo where it should be able to add extra combo in that cell. We have tried appendChild but is not working. Any idea how to add extra combo boxes. Below is the codes and function to do that is addSubRow.
<HTML>
<HEAD>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
newcell.innerHTML = newcell.innerHTML +"<br> TEST";
//alert(newcell.childNodes);
/*switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
newcell.childNodes[0].id = "input" + rowCount;
break;
case "checkbox":
newcell.childNodes[0].checked = false;
newcell.childNodes[0].id = "checkbox" + rowCount;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
newcell.childNodes[0].id = "select" + rowCount;
break;
}*
if(newcell.childNodes[0].type=="button")
{
alert("TEST");
newcell.childNodes[0].id=rowCount;
}*/
}
var table = document.getElementById(tableID);
var rows = table.getElementsByTagName('tr');
for (var i = 0, row; row = table.rows[i]; i++) {
row.id="row"+i;
row.name="row"+i;
var rowName = "row"+i;
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j++) {
//iterate through columns
//columns would be accessed using the "col" variable assigned in the for loop
col.id="col_"+i+"_"+j;
col.name="col_"+i+"_"+j;
var cels = rows[i].getElementsByTagName('td')[j];
var realKids = 0,count = 0;
kids = cels.childNodes.length;
while(count < kids){
if(cels.childNodes[i].nodeType != 3){
realKids++;
}
count++;
}
alert("I : "+i+" "+"J : "+j+" "+"realKids :"+cels.childElementCount);
//alert();
}
}
}
function addSubRow(tableID,colID) {
var tdID = document.getElementById(colID);
var table = document.getElementById(tableID);
var comboBox1 = table.rows[0].cells[2].childNodes[1];
comboBox1 = comboBox1;
tdID.appendChild(comboBox1);
//tdID.appendChild(comboBox1);
//tdID.appendChild(comboBox1);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
var table = document.getElementById(tableID);
for (var i = 0, row; row = table.rows[i]; i++) {
row.id="row"+i;
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j++) {
//iterate through columns
//columns would be accessed using the "col" variable assigned in the for loop
//alert("J : "+j);
col.id="col"+i;
if(j==0)
{
}
else if(j==1)
{
}
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD><INPUT type="text" name="txt"/></TD>
<TD id="col_0_2">
<INPUT type="button" value="Add Combo" onclick="addSubRow('dataTable','col_0_2')" />
<SELECT name="country">
<OPTION value="in">India</OPTION>
<OPTION value="de">Germany</OPTION>
<OPTION value="fr">France</OPTION>
<OPTION value="us">United States</OPTION>
<OPTION value="ch">Switzerland</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
I'm not sure if this is what you really want, but here's a working function addSubRow function for appending a combobox.
I added some comments to explain what I did:
function addSubRow(tableID,colID) {
var tdID = document.getElementById(colID);
var table = document.getElementById(tableID);
// Create a new combobox element
var new_comboBox = document.createElement('select');
// Define / Add new combobox's attributes here
//new_comboBox.setAttribute('id', 'something');
// ...
// ...
// Add new combobox's options - you may use a 'for' loop...
var option_1 = document.createElement('option');
option_1.setAttribute('value', '1');
var txt_1 = document.createTextNode("OPTION 1");
option_1.appendChild(txt_1);
var option_2 = document.createElement('option');
option_2.setAttribute('value', '2');
var txt_2 = document.createTextNode("OPTION 2");
option_2.appendChild(txt_2);
var option_3 = document.createElement('option');
option_3.setAttribute('value', '3');
var txt_3 = document.createTextNode("OPTION 3");
option_3.appendChild(txt_3);
// ...
// ...
// Appending options to the new combobox
new_comboBox.appendChild(option_1);
new_comboBox.appendChild(option_2);
new_comboBox.appendChild(option_3);
// ...
// ...
// Appending the combobox to the TD
tdID.appendChild(new_comboBox);
}
PS:
Pay attention when defining the combobox's attributes and its options' attributes
I don't think that you need to use the table's ID tableID, in your function. You may simplify your function addSubRow by rmoving this argument?
Hope this helps mate.