Unexpected behavior manipulating dynamic user input table

Question

I am trying to remove checked row from dynamic user input table , but it never works. Here is the code

function addRow(tableID){
  var table=document.getElementById(tableID);
  var rowCount=table.rows.length;
  if(rowCount<5){
    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;
      }
    }else{
      alert("Maximum number of extra data is 5.");
    }
}


function deleteRow(tableID) {
  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 remove all.");
        break;
      }
      table.deleteRow(i);
      rowCount--;
      i--;
    }
  }
}

<p>
  <input type="button" value="Add Option" onClick="addRow('dataTable')"/>
  <input type="button" value="Remove Option" onClick="deleteRow('dataTable')"/>
  <table id="dataTable" >
    <tbody>
      <tr>
        <p>
          <td>
            <input type="checkbox"  required="required" name="chk[]" checked="checked" />
          </td>
          <td>
            <label>Name of Data:</label>
            <input type="text" name="dataName">
          </td>
          <td>
            <label>Data:</label>
            <input type="text" name="data">
          </td>
        </p>
      </tr>
    </tbody>
  </table>

The add function works fine, but delete function doesn't work. Could someone tell me what happened?

If you rename your custom `deleteRow` function, does it work? Wondering if your code is stepping on its own feet because you used an inherent native JS function name. — Tyler Roper, Oct 04 '16 at 00:13
@Terry, if your problem is solved, you can select the answer. So, no more developer takes time on this post — Mojtaba, Oct 04 '16 at 13:11

score 1 · Accepted Answer · answered Oct 04 '16 at 00:20

You almost done.

There are a few issues:

You have a blank space after <td> and before <input>. So, your <input> becomes as the second child:

<td>
                            <input type="checkbox"  required="required" name="chk[]" checked="checked" /></td>

It should be:

<td><input type="checkbox"  required="required" name="chk[]" checked="checked" /></td>

Otherwise, you can change childNodes[0] to childNodes[1].

Also, why do you have <p> before and after <td>? remove them.

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if (rowCount < 5) {
        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;
        }
    } else {
        alert("Maximum number of extra data is 5.");
    }
}


function deleteRow(tableID) {
    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 remove all.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

<input type="button" value="Add Option" onClick="addRow('dataTable')" />
<input type="button" value="Remove Option" onClick="deleteRow('dataTable')" />
<table id="dataTable">
    <tbody>
        <tr>
            <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
            <td>
                <label>Name of Data:</label>
                <input type="text" name="dataName"> </td>
            <td>
                <label>Data:</label>
                <input type="text" name="data"> </td>
        </tr>
    </tbody>
</table>

Oh, that's why! Thank you Mojtaba! – Terry Oct 04 '16 at 00:31 — Terry, Oct 04 '16 at 00:31

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

These are good answers, but better yet is to replace .childNodes[0] with .children[0] because you are only interested in elements, that way you don't have to worry about spaces and other sneaky stuff like that. You can read about it here : What is the difference between children and childNodes in JavaScript?

edited May 23 '17 at 12:16

Community

1
1

answered Oct 04 '16 at 00:26

Chad McGrath

1,561
1
11
17

Upvoted. I agree with you. I tried to explain what is happening. Cuz, he asked to know what happened. – Mojtaba Oct 04 '16 at 00:30

score 0 · Answer 3 · answered Oct 04 '16 at 00:19

Made a change from

var chkbox = row.cells[0].childNodes[0];

to

var chkbox = row.cells[0].childNodes[1];

It is working now.

function addRow(tableID){
 var table=document.getElementById(tableID);
 var rowCount=table.rows.length;
 if(rowCount<5){
  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;
   }
  }else{
   alert("Maximum number of extra data is 5.");
  }
}


function deleteRow(tableID) {
 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[1];
  if(null != chkbox && true == chkbox.checked) {
   if(rowCount <= 1) {    
    alert("Cannot remove all.");
    break;
   }
   table.deleteRow(i);
   rowCount--;
   i--;
  }
 }
}

 <p>
   <input type="button" value="Add Option" onClick="addRow('dataTable')"/>
   <input type="button" value="Remove Option" onClick="deleteRow('dataTable')"/>
   <table id="dataTable" >
    <tbody>
     <tr>
     <p>
     <td>
       <input type="checkbox"  required="required" name="chk[]" checked="checked" /></td>
     <td>
     <label>Name of Data:</label>
     <input type="text" name="dataName">
     </td>
     <td>
     <label>Data:</label>
     <input type="text" name="data">
     </td>
     </p>
     </tr>
     </tbody>
     </table>

Thanks a a lot! Do you know why childnode[1]works here but childnode[0] don't? — Terry, Oct 04 '16 at 00:25

Unexpected behavior manipulating dynamic user input table

3 Answers3