從HTML表格刪除一行后，如何存儲單元格的值？
[英]How can I store the value of a cell upon deleting a row from an HTML table?
問題描述
我有下表和JavaScript代碼：
function deleteRow() { var td = event.target.parentNode; var tr = td.parentNode; // the row to be removed tr.parentNode.removeChild(tr); deletedIds.push(tr.cell(0).innerHTML); }
<!DOCTYPE html> <html lang="en"> <body> <TABLE id="eventTable" border="1" style="border: 1px solid #000000; border-collapse: collapse;" cellpadding="4"> <TR> <TH>ID</TH> <TH>Timestamp</TH> <TH>Filename</TH> <TH>Frequency</TH> <TH>Hostname</TH> <TH>Port</TH> <TH>Band</TH> <TH>Start Time</TH> <TH>End Time</TH> <TH>Delete</TH> </TR> <TR> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"> <button type='button' value='delete' 'class='center2 ' onclick='deleteRow();'> Delete Event </button></TD> </TR> </TABLE>
單擊Delete Event按鈕后，我想將數組中該行的id列中的內容存儲起來。
deleteRow函數可以正確地從HTML表中刪除該行，但是會產生錯誤，因為tr.cell不是有效的函數。 如何存儲DeletedIds數組中已刪除行的ID列中的內容？
3 個解決方案
解決方案1
1 已采納 2019-06-03 00:58:01
您的代碼大部分是正確的，只是一些錯誤：
- 您在讀取元素的innerHTML之前將其刪除。
-
tr.cells[i]是訪問第i列的正確方法。
查看以下工作片段。
var deletedIds = []; function deleteRow() { var td = event.target.parentNode; var tr = td.parentNode; // the row to be removed //deletedIds is the name of the array deletedIds.push(tr.cells[0].innerHTML); tr.parentNode.removeChild(tr); console.log(deletedIds); }
<TABLE id="eventTable" border="1" style="border: 1px solid #000000; border-collapse: collapse;" cellpadding="4"> <TR> <TH>ID</TH> <TH>Timestamp</TH> <TH>Filename</TH> <TH>Frequency</TH> <TH>Hostname</TH> <TH>Port</TH> <TH>Band</TH> <TH>Start Time</TH> <TH>End Time</TH> <TH>Delete</TH> </TR> <TR> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"> <button type="button" id="delete0" onclick="deleteRow()"> Delete Event </button></TD> </TR> </TABLE>
解決方案2
1 2019-06-03 00:59:41
你可以做這樣的事情。
1.調用該函數並向其發送元素（ button ）。
2.獲取tr及其cells集合。
3.刪除之前按入陣列。
var deletedIds = []; function deleteRow(el) { //var td = event.target.parentNode; var tr = el.parentNode.parentNode; // the row to be removed deletedIds.push({ id: el.id, td0: tr.cells[0].innerHTML }); tr.parentNode.removeChild(tr); console.log(deletedIds); }
<!DOCTYPE html> <html lang="en"> <body> <TABLE id="eventTable" border="1" style="border: 1px solid #000000; border-collapse: collapse;" cellpadding="4"> <TR> <TH>ID</TH> <TH>Timestamp</TH> <TH>Filename</TH> <TH>Frequency</TH> <TH>Hostname</TH> <TH>Port</TH> <TH>Band</TH> <TH>Start Time</TH> <TH>End Time</TH> <TH>Delete</TH> </TR> <TR> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"> <button type='button' id='delete0' class='center2' onclick="deleteRow(this);"> Delete Event </button></TD> </TR> <TR> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"> <button type='button' id='delete1' class='center2' onclick="deleteRow(this);"> Delete Event </button></TD> </TR> </TABLE>
解決方案3
0 2019-06-03 00:39:40
我會做不同的事情並將id應用於行-然后將其存儲在刪除中，即：-tr.attr（'id'）
var deletedIds = []; function deleteRow(index) { var rows = document.querySelectorAll('#eventTable tr'); rows.forEach(function(row){ let id = row.getAttribute('id'); if (id == index) { deletedIds.push(id); row.parentNode.removeChild(row); } }) console.log(deletedIds); }
<!DOCTYPE html> <html lang="en"> <body> <TABLE id="eventTable" border="1" style="border: 1px solid #000000; border-collapse: collapse;" cellpadding="4"> <TR> <TH>ID</TH> <TH>Timestamp</TH> <TH>Filename</TH> <TH>Frequency</TH> <TH>Hostname</TH> <TH>Port</TH> <TH>Band</TH> <TH>Start Time</TH> <TH>End Time</TH> <TH>Delete</TH> </TR> <TR id="1"> <TD contenteditable="true">1</TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"> <button type='button' class='center2 ' onclick="deleteRow(1)"> Delete Event</button> </TD> </TR> <TR id="2"> <TD contenteditable="true">2</TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"> <button type='button' class='center2 ' onclick="deleteRow(2)"> Delete Event</button> </TD> </TR> </TABLE>
如何使用PHP偏移HTML表以從不同列的第二行單元格值中減去第一行的單元格值
[英]How To offset an HTML table with PHP to Subtract cell value of 1st row from 2nd row cell value of different columns
隱藏或刪除行后，如何更新 HTML 表中的行索引？
[英]How can I update row indexes in an HTML table after hiding or deleting rows?
根據單元格值（來自 SQL 服務器）為 HTML 表的行着色
[英]Color the row of a HTML table from a cell value (from an SQL server)
如何定位我單擊的表格行中每個單元格的內部 html？
[英]How can I target the inner html of each cell in a table row that I've clicked on?
如何從html表中選擇行並獲取第一個單元格的值並將其放在PHP Session上
[英]How select row from html table and get the value of the first cell and put it on PHP Session
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.