从表格中添加/删除行

Question

从表格中添加/删除行

37

我有一个表格，其中包含一些受扶养人信息，并为每一行提供添加和删除按钮以添加/删除其他受扶养人。当我点击“添加”按钮时，表格会添加一行新数据，但是当我点击“删除”按钮时，它首先删除标题行，然后在随后的点击中删除相应行。

这是我的代码：

Javascript 代码

   function deleteRow(row){
      var d = row.parentNode.parentNode.rowIndex;
      document.getElementById('dsTable').deleteRow(d);
   }

HTML 代码

<table id = 'dsTable' >
      <tr>
         <td> Relationship Type </td>
         <td> Date of Birth </td>
         <td> Gender </td>
      </tr>
      <tr>
         <td> Spouse </td>
         <td> 1980-22-03 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()" </td>
         <td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)"  </td>
      </tr>
       <tr>
         <td> Child </td>
         <td> 2008-23-06 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()"</td>
         <td>  <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)" </td>
      </tr>
   </table>

- yogsma

@gdoron 可能需要查看HTML代码; =) onclick =“deleteRow（this）” - Samuel Rossille

@gdoron 这就是编辑的问题 ;=) - Samuel Rossille

这种情况只发生在您使用JS代码添加行之后，还是在页面最初加载后也会发生？ - Makkes

@Makkes - 这也发生在页面第一次初始加载后。 - yogsma

我无法通过您发布的代码在Firefox或Chrome中重现这种行为。 - Makkes

显示剩余2条评论

10个回答

10

jQuery有一个不错的功能可以从DOM中删除元素。

closest()函数很酷，因为它会“通过测试元素本身并穿过其祖先来获取与选择器匹配的第一个元素。”

$(this).closest("tr").remove();

每个删除按钮都可以通过调用该非常简洁的代码运行该函数。

- soycharliente

2

除此之外，为了控制行的删除，jquery还可以帮助绑定您的行操作，这样您就不必使用冗余的js调用，而是可以将其放在按钮class ="addDep"上（注意：id不能重复使用），然后在js中执行$('.addDep').on('click',add);和$('.deleteDep').on('click', deleteRow);。 - slawder

closest() 现在是原生 JavaScript 函数。 - Louise Eggleton

1

很多好的答案，但这里还有一个 ;)

您可以为表格添加单击处理程序。

<table id = 'dsTable' onclick="tableclick(event)">

然后只需找出事件的目标是什么

function tableclick(e) {
    if(!e)
     e = window.event;

    if(e.target.value == "Delete")
       deleteRow( e.target.parentNode.parentNode.rowIndex );
}

那么您就不必为每一行添加事件处理程序，您的HTML看起来更整洁。如果您不想在HTML中添加任何JavaScript，甚至可以在页面加载时添加处理程序：

document.getElementById('dsTable').addEventListener('click',tableclick,false);

这是可用的代码：http://jsfiddle.net/hX4f4/2/

- CodeBro

0

首先，我建议您尝试正确地格式化您的表格，例如：

我不禁想到，格式化表格至少不会有任何害处。

<table>
   <thead>
      <th>Header1</th>
      ......
   </thead>
   <tbody>
       <tr><td>Content1</td>....</tr>
       ......
   </tbody>
</table>

- thatidiotguy

在发布这样的答案之前，您可能需要检查自己的代码是否存在错误。您不能将任何数据放置在<tr></tr>中。结果通常是数据显示在<table>之前。 - Christian Lundahl

2

@Perplexor 是的，是一个愚蠢的语法错误。从坐在椅子上的角度批评很容易。 - thatidiotguy

0

我建议使用jQuery。目前你正在做的很容易不需要jQuery，但当你想要新的功能和更多的功能时，jQuery会节省你大量的时间。我还想提醒你，在一个文档中不应该有多个具有相同ID的DOM元素。在这种情况下请使用class属性。

html：

<table id="dsTable">
  <tr>
     <td> Relationship Type </td>
     <td> Date of Birth </td>
     <td> Gender </td>
  </tr>
  <tr>
     <td> Spouse </td>
     <td> 1980-22-03 </td>
     <td> female </td>
     <td> <input type="button" class="addDep" value="Add"/></td>
     <td> <input type="button" class="deleteDep" value="Delete"/></td>
  </tr>
   <tr>
     <td> Child </td>
     <td> 2008-23-06 </td>
     <td> female </td>
     <td> <input type="button" class="addDep" value="Add"/></td>
     <td> <input type="button" class="deleteDep" value="Delete"/></td>
  </tr>
</table>

JavaScript：

$('body').on('click', 'input.deleteDep', function() {
   $(this).parents('tr').remove();  
});

请记得引用jQuery：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

这里有一个可工作的jsfiddle示例： http://jsfiddle.net/p9dey/1/

- Michal B.

0

尝试使用以下代码进行插入

 var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";

这是用于删除的代码

document.getElementById("myTable").deleteRow(0);

- Saeid Alipour

0

使用以下代码删除表中特定行：

   <td>
 <asp:ImageButton ID="imgDeleteAction" runat="server" ImageUrl="~/Images/trash.png"  OnClientClick="DeleteRow(this);return false;"/>
 </td>
function DeleteRow(element) {
        document.getElementById("tableID").deleteRow(element.parentNode.parentNode.rowIndex);
          
    }

- Sumant Singh

0

这是使用jQuery的代码JS Bin。在所有浏览器上进行了测试。在这里，我们必须点击行以便以美观的效果删除它。希望能有所帮助。

- palaѕн

-1

是的，它运行得很好但是当用户点击按钮时，我也必须从本地存储中删除，这是我的代码

function RemoveRow(id) {
    // event.target will be the input element.
    // console.log(id)
    let td1 = event.target.parentNode; 
    let tr1 = td1.parentNode; 
    tr1.parentNode.removeChild(tr1);// the row to be removed
    // const books = JSON.parse(localStorage.getItem("books"));
    // const newBooks= books.filter(book=> book.id !== books.id);
    // console.log(books, newBooks)
    // localStorage.setItem("books", JSON.stringify(newBooks));
}

// function RemoveRow(btn) {
//     var row = btn.parentNode.parentNode;
//     row.parentNode.removeChild(row);
//   }

按钮标签

class Display {
    add(book) {
        console.log('Adding to UI');
        let tableBody = document.getElementById('tableBody')
        let uiString = `<tr class="tableBody" id="tableBody" data-id="${book.id}">
                            <td id="search">${book.name}</td>
                            <td>${book.author}</td>
                            <td>${book.type}</td>
                            <td><input type="button" value="Delete Row" class="btn btn-outline-danger" onclick="RemoveRow(this)"></td>
                        </tr>`;
        tableBody.innerHTML += uiString;

        // save the data to the browser's local storage -----
        const books = JSON.parse(localStorage.getItem("books"));
        // console.log(books);
        if (!books.some((oldBook) => oldBook.id === book.id)) books.push(book);
        localStorage.setItem("books", JSON.stringify(books));

    }

- MohammedVaraliya

-2

嗨，我想做类似这样的事情：

var id = 4; // inital number of rows plus one
function addRow(){
   // add a new tr with id 
   // increment id;
}

function deleteRow(id){
   $("#" + id).remove();
}

我会有一个像这样的表：

<table id = 'dsTable' >
      <tr id=1>
         <td> Relationship Type </td>
         <td> Date of Birth </td>
         <td> Gender </td>
      </tr>
      <tr id=2>
         <td> Spouse </td>
         <td> 1980-22-03 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()" </td>
         <td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(2)"  </td>
      </tr>
       <tr id=3>
         <td> Child </td>
         <td> 2008-23-06 </td>
         <td> female </td>
         <td> <input type="button" id ="addDep" value="Add" onclick = "add()"</td>
         <td>  <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(3)" </td>
      </tr>
   </table>

如果你想的话，也可以使用循环来构建表格。这样就容易构建表格了。同样的方法也适用于编辑:)

- Pop Radu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dan K.K. · Accepted Answer

JavaScript稍作修改：

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

和原来略有不同的HTML：

<table id="dsTable">
  <tbody>
    <tr>
      <td>Relationship Type</td>
      <td>Date of Birth</td>
      <td>Gender</td>
    </tr>
    <tr>
      <td>Spouse</td>
      <td>1980-22-03</td>
      <td>female</td>
      <td><input type="button" value="Add" onclick="add()"/></td>
      <td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
    </tr>
    <tr>
      <td>Child</td>
      <td>2008-23-06</td>
      <td>female</td>
      <td><input type="button" value="Add" onclick="add()"/></td>
      <td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
    </tr>
  </tbody>
</table>