I try to add new row on myTable by javaScript, but when I want to check some checkbox to deleteRows, the count of rows by name = 0, but new checkBox are correct.
var row = document.getElementsByName("mytr"); >>>>>>> equal 0 ,, but
var checkboxchild = document.getElementsByName("checkall"); >>>>> correct if I add 4 checkbox, the length is 4
for(var i=1;i<=checkboxchild.length;i++)
{
if(checkboxchild[i].checked == true)
{
row[i].remove(); // Here my error : 'undefined' is null or not an object
}
}
I tried this ( or Mytable.deleteRow[i] ), no errors found, but not work.
/*** FUNCTION TO ADD ROW ***/
function addSampleRow(id) {
/*** We get the table object based on given id ***/
var objTable = document.getElementById(id);
/*** We insert the row by specifying the current rows length ***/
var objRow = objTable.insertRow(objTable.rows.length);
/*** We insert the first row cell ***/
var objCell1 = objRow.insertCell(0);
/*** We insert a checkbox object ***/
var objInputCheckBox = document.createElement("input");
objInputCheckBox.type = "checkbox";
objCell1.appendChild(objInputCheckBox);
/*** We insert the second row cell ***/
var objCell2 = objRow.insertCell(1);
var currentDate = new Date()
/*** We add some text inside the celll ***/
objCell2.innerHTML = "You add me on " + currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
}
/*** FUNCTION TO DELETE ROW ***/
function removeSampleRow(id) {
/***We get the table object based on given id ***/
var objTable = document.getElementById(id);
/*** Get the current row length ***/
var iRow = objTable.rows.length;
/*** Initial row counter ***/
var counter = 0;
/*** Performing a loop inside the table ***/
if (objTable.rows.length > 1) {
for (var i = 0; i < objTable.rows.length; i++) {
/*** Get checkbox object ***/
var chk = objTable.rows[i].cells[0].childNodes[0];
if (chk.checked) {
/*** if checked we del ***/
objTable.deleteRow(i);
iRow--;
i--;
counter = counter + 1;
}
}
/*** Alert user if there is now row is selected to be deleted ***/
if (counter == 0) {
alert("Please select the row that you want to delete.");
}
}else{
/*** Alert user if there are no rows being added ***/
alert("There are no rows being added");
}
}
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
40 Points
96 Posts
when I add new row by javascript appendChild, the rows count =0
Jan 01, 2017 01:54 PM|Khalid Salameh|LINK
Hello,
I try to add new row on myTable by javaScript, but when I want to check some checkbox to deleteRows, the count of rows by name = 0, but new checkBox are correct.
var row = document.getElementsByName("mytr"); >>>>>>> equal 0 ,, but var checkboxchild = document.getElementsByName("checkall"); >>>>> correct if I add 4 checkbox, the length is 4 for(var i=1;i<=checkboxchild.length;i++) { if(checkboxchild[i].checked == true) { row[i].remove(); // Here my error : 'undefined' is null or not an object } }I tried this ( or Mytable.deleteRow[i] ), no errors found, but not work.
thank you.
All-Star
42681 Points
18132 Posts
Re: when I add new row by javascript appendChild, the rows count =0
Jan 01, 2017 03:08 PM|mgebhard|LINK
The name attribute does not apply to a table row (tr).
https://developer.mozilla.org/en-US/docs/Web/API/Element/name
Use instead a class, Id, or data- attribute to select table rows.
Contributor
2970 Points
1210 Posts
Re: when I add new row by javascript appendChild, the rows count =0
Feb 11, 2017 04:32 AM|Deepak Panchal|LINK
Hi Khalid Salam...
please refer code below may help you.
/*** FUNCTION TO ADD ROW ***/ function addSampleRow(id) { /*** We get the table object based on given id ***/ var objTable = document.getElementById(id); /*** We insert the row by specifying the current rows length ***/ var objRow = objTable.insertRow(objTable.rows.length); /*** We insert the first row cell ***/ var objCell1 = objRow.insertCell(0); /*** We insert a checkbox object ***/ var objInputCheckBox = document.createElement("input"); objInputCheckBox.type = "checkbox"; objCell1.appendChild(objInputCheckBox); /*** We insert the second row cell ***/ var objCell2 = objRow.insertCell(1); var currentDate = new Date() /*** We add some text inside the celll ***/ objCell2.innerHTML = "You add me on " + currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds(); } /*** FUNCTION TO DELETE ROW ***/ function removeSampleRow(id) { /***We get the table object based on given id ***/ var objTable = document.getElementById(id); /*** Get the current row length ***/ var iRow = objTable.rows.length; /*** Initial row counter ***/ var counter = 0; /*** Performing a loop inside the table ***/ if (objTable.rows.length > 1) { for (var i = 0; i < objTable.rows.length; i++) { /*** Get checkbox object ***/ var chk = objTable.rows[i].cells[0].childNodes[0]; if (chk.checked) { /*** if checked we del ***/ objTable.deleteRow(i); iRow--; i--; counter = counter + 1; } } /*** Alert user if there is now row is selected to be deleted ***/ if (counter == 0) { alert("Please select the row that you want to delete."); } }else{ /*** Alert user if there are no rows being added ***/ alert("There are no rows being added"); } }HTML Code:
<p> <input type="button" id="btnAdd" value="Add Sample Row" onclick="addSampleRow('tblSample')"> <input type="button" id="btnDelete" value="Delete Selected Rows" onclick="removeSampleRow('tblSample')"> </p> <table id="tblSample" border="1" cellspacing="2" cellpadding="10"> <tr> <td>Checkbox</td> <td>Sample value</td> </tr> </table>Output:
Reference:
How to add and delete a table row in javascript
Regards
Deepak
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.