簡體   English   中英

如何使用JavaScript刪除表格中的特定行?

[英]How to delete a specific row in a table using javascript?

到目前為止,我已經實現了什么:

  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> 

讓我知道這是否適合您:

 //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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM