javascript - 使用javascript删除行时出错？

Question

我有一个示例代码：

<input type="checkbox" id="input_modem_1" onclick="add_delete_row(this, 1,'test1' )" name="modem_id[]" value="1" /> test 1
<input type="checkbox" id="input_modem_2" onclick="add_delete_row(this, 2,'test2' )" name="modem_id[]" value="2" /> test 2
<table id="modem_list"></table>

和代码javascript：

<script>
function add_delete_row(element, id, modem_name) {
    if(element.checked) {
        if(id) {
            deleteRow(id);
        }
        addRow(id, modem_name);
    } else {
        deleteRow(id);
    }
}
function addRow(id, modem_name) {
    var table = document.getElementById("modem_list");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "hidden";
    element2.value = id;
    cell2.innerHTML = modem_name;
    cell2.appendChild(element2);
}
function deleteRow(id) {
    try {
        $('modem_list').removeChild($('modem_'+id));
        $('modem_list').removeChild($('input_modem_'+id));
    } catch(err){}
}
</script>  

当我检查一个值是结果添加一行时，当我取消选中这一行时，结果没有运行并且它添加更多，如何修复它

Answer 1

如果要使用 jQuery 按 ID 选择元素，则需要使用井号。那是

$('#modem_list')

不是

$('modem_list')

Answer 2

row.setAttribute("name","modem_"+id);之后添加var row = table.insertRow(rowCount);

并替换function deleteRow(id)为下一个

function deleteRow(id) {
    var table = document.getElementById("modem_list");
    var rowName = 'modem_'+id;
    if (table.rows.namedItem(rowName)) {
        table.deleteRow((table.rows.namedItem(rowName).rowIndex));
    }
}

它可以在没有 jquery 的情况下工作

Answer 3

您不能使用此代码：在function addRow()您添加：

var row = table.insertRow(rowCount);
row.className = "input_"+id; // with id is 1, 2, ...n

和：

function deleteRow(id) {
    try {
        jQuery(".input_"+id).remove();
    } catch(err){}
}