操纵动态用户输入表的意外行为

你差不多完成了。

有几个问题:

在<td>之后和<input>之前有一个空格。所以，你的<input>变成了第二个孩子:

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

应该是:

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

否则，可以将childNodes[0]改为childNodes[1]。

还有，为什么在<td>之前和之后有<p> ?移除它们。

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>

这些都是很好的答案，但更好的是将.childNodes[0]替换为.children[0]，因为您只对元素感兴趣，这样您就不必担心空格和其他类似的东西。在JavaScript中，children和childNodes的区别是什么?

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

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

它正在工作。

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>