如何使用javascript删除表格中的特定行？

Question

我到目前为止执行：

1. 在输入字段中输入值，然后单击“添加”按钮，输入的数值被添加到新行。
2. 而当我点击删除按钮，所有的行都被删除。

我需要实现：

1. 复选框应该被添加到每一行。
2. 如果我选中复选框并单击“删除”按钮，则只有该特定行应该被删除，并且如果我同时选择多个复选框，它也应该可以工作。 3.点击添加按钮后清除输入字段。 任何人都可以检查这一点，并告诉我如何做到这一点。

//Javascript code to Add new rows onclick of a button and to delete row . 
 
function addMoreRows() { 
 

 
    var user = document.getElementById('user_id').value; 
 
    var date = document.getElementById('date').value; 
 
    var color = document.getElementById('color').value; 
 
    var table = document.getElementById('tbl_id'); 
 

 
    var row = table.insertRow(); 
 

 
    var userName = row.insertCell(0); 
 
    var Date = row.insertCell(1); 
 
    var Color = row.insertCell(2); 
 
    var checkbox = row.insertCell(3); 
 

 
    userName.innerHTML = user; 
 
    Date.innerHTML = date; 
 
    Color.innerHTML = color; 
 

 
} 
 

 
function deleteMoreRows(tableID) { 
 

 
    var table = document.getElementById(tableID); 
 
    var rowCount = table.rows.length; 
 

 
    for (var i = 0; i < rowCount; i++) { 
 

 
     table.deleteRow(i); 
 
     rowCount--; 
 
     i--; 
 
    } 
 
}

<!-- HTML markup for the input fields and table . --> 
 
<form align="center" method="GET"> 
 
    Enter your name : <input type="text" name="users" id="user_id" value="name" onfocus="if(this.value == 'name') {this.value=''}" onblur="if(this.value == ''){this.value ='name'}"><br> 
 
    Select the Date : <input type="date" id="date"><br> 
 
    Select your favorite color: 
 
    <select id="color" required> 
 
     <option value="yellow">yellow</option> 
 
     <option value="red">red</option> 
 
    </select> 
 
    <br> 
 
    <br> 
 
    <input type="button" id="mysubmit" value="Add Row" onClick="addMoreRows()"> 
 
    <input type="button" id="delete" value="Delete" onClick="deleteMoreRows('tbl_id')"> 
 
</form> 
 
<br> 
 
<br> 
 
<table id="tbl_id" style="text-align:center" align="center" valign="top"> 
 
    <thead> 
 
     <tr> 
 
     <th style="width:200px;">Name</th> 
 
     <th style="width:200px;">Date</th> 
 
     <th style="width:200px;">Color</th> 
 
     </tr> 
 
    </thead>

Answer 1

让我知道这对你的作品：

//Javascript code to Add new rows onclick of a button and to delete row . 
 

 
var rowId = 0; 
 

 
function addMoreRows() { 
 

 
    var user = document.getElementById('user_id').value; 
 
    var date = document.getElementById('date').value; 
 
    var color = document.getElementById('color').value; 
 
    var table = document.getElementById('tbl_id'); 
 

 
    var row = table.insertRow(); 
 

 
    var rowBox = row.insertCell(0); 
 
    var userName = row.insertCell(1); 
 
    var Date = row.insertCell(2); 
 
    var Color = row.insertCell(3); 
 
    var checkbox = row.insertCell(4); 
 

 
    rowBox.innerHTML = '<input type="checkbox" id="delete' + getRowId() + '">'; 
 
    userName.innerHTML = user; 
 
    Date.innerHTML = date; 
 
    Color.innerHTML = color; 
 

 
} 
 

 
function deleteMoreRows(tableID) { 
 

 
    var table = document.getElementById(tableID); 
 
    var rowCount = table.rows.length; 
 
    var selectedRows = getCheckedBoxes(); 
 

 
    selectedRows.forEach(function(currentValue) { 
 
     deleteRowByCheckboxId(currentValue.id); 
 
    }); 
 
} 
 

 
function getRowId() { 
 
    rowId += 1; 
 
    return rowId; 
 
} 
 

 
function getRowIdsFromElements($array) { 
 
    var arrIds = []; 
 

 
    $array.forEach(function(currentValue, index, array){ 
 
    arrIds.push(getRowIdFromElement(currentValue)); 
 
    }); 
 

 
    return arrIds; 
 
} 
 

 
function getRowIdFromElement($el) { 
 
    return $el.id.split('delete')[1]; 
 
} 
 

 
//ref: http://stackoverflow.com/questions/8563240/how-to-get-all-checked-checkboxes 
 
function getCheckedBoxes() { 
 
    var inputs = document.getElementsByTagName("input"); 
 
    var checkboxesChecked = []; 
 

 
    // loop over them all 
 
    for (var i=0; i < inputs.length; i++) { 
 
    // And stick the checked ones onto an array... 
 
    if (inputs[i].checked) { 
 
     checkboxesChecked.push(inputs[i]); 
 
    } 
 
    } 
 

 
    // Return the array if it is non-empty, or null 
 
    return checkboxesChecked.length > 0 ? checkboxesChecked : null; 
 
} 
 

 
//ref: http://stackoverflow.com/questions/4967223/delete-a-row-from-a-table-by-id 
 
function deleteRowByCheckboxId(CheckboxId) { 
 
    var checkbox = document.getElementById(CheckboxId); 
 
    var row = checkbox.parentNode.parentNode;    //box, cell, row, table 
 
    var table = row.parentNode; 
 

 
    while (table && table.tagName != 'TABLE') 
 
     table = table.parentNode; 
 
    if (!table) return; 
 
    table.deleteRow(row.rowIndex); 
 
}

<!-- HTML markup for the input fields and table . --> 
 
<form align="center" method="GET"> 
 
    Enter your name : <input type="text" name="users" id="user_id" value="name" onfocus="if(this.value == 'name') {this.value=''}" onblur="if(this.value == ''){this.value ='name'}"><br> 
 
    Select the Date : <input type="date" id="date"><br> 
 
    Select your favorite color: 
 
    <select id="color" required> 
 
     <option value="yellow">yellow</option> 
 
     <option value="red">red</option> 
 
    </select> 
 
    <br> 
 
    <br> 
 
    <input type="button" id="mysubmit" value="Add Row" onClick="addMoreRows()"> 
 
    <input type="button" id="delete" value="Delete" onClick="deleteMoreRows('tbl_id')"> 
 
</form> 
 
<br> 
 
<br> 
 
<table id="tbl_id" style="text-align:center" align="center" valign="top"> 
 
    <thead> 
 
     <tr> 
 
     <th style="width:200px;">Delete</th> 
 
     <th style="width:200px;">Name</th> 
 
     <th style="width:200px;">Date</th> 
 
     <th style="width:200px;">Color</th> 
 
     </tr> 
 
    </thead>