Terry Terry - 2 months ago 13
HTML Question

Unexpected behavior manipulating dynamic user input table

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?

Answer

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>