在表中动态添加行 - Bootstrap 和 JS

Posted 2023-03-14

【中文标题】在表中动态添加行 - Bootstrap 和 JS

【英文标题】：Add row in table dynamically - Bootstrap & JS

【发布时间】：2021-08-06 13:23:04

【问题描述】：

我的代码需要帮助。每当用户单击添加按钮时，如何添加索引号以及如何插入文本输入，就像第一行一样？我还在学习如何使用 JS。提前谢谢！

function childrenRow() 
  var table = document.getElementById("childTable");
  var row = table.insertRow(2);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);
  var cell5 = row.insertCell(4);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<table class="table table-bordered" id="childTable">
  <thead class="table-info">
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">School / University </th>
      <th scope="col">Year</th>
      <th scope="col">Age</th>
      <th scope=""></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td class="col-sm-4">
        <input type="text" name="name" class="form-control" />
      </td>
      <td>
        <input type="text" name="school" class="form-control" />
      </td>
      <td class="col-sm-2">
        <input type="text" name="year" class="form-control" />
      </td>
      <td class="col-sm-2">
        <input type="text" name="age" class="form-control" />
      </td>
      <td>
        <input type="button" class="btn btn-block btn-default" id="addrow" onclick="childrenRow()" value="+" />
      </td>
    </tr>
  </tbody>
</table>

【参考方案1】：

检查此代码.....

var i = 1;
function childrenRow() 
  i++;
  $('#childTable').find('tbody').append('<tr><th scope="row">'+i+'</th><td class="col-sm-4"><input type="text" name="name" class="form-control" /></td><td><input type="text" name="school" class="form-control" /></td><td class="col-sm-2"><input type="text" name="year" class="form-control" /></td><td class="col-sm-2"><input type="text" name="age" class="form-control" /></td><td><input type="button" class="btn btn-block btn-default" id="addrow" onclick="childrenRow()" value="+" /></td></tr>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<table class="table table-bordered" id="childTable">
  <thead class="table-info">
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">School / University </th>
      <th scope="col">Year</th>
      <th scope="col">Age</th>
      <th scope=""></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td class="col-sm-4">
        <input type="text" name="name" class="form-control" />
      </td>
      <td>
        <input type="text" name="school" class="form-control" />
      </td>
      <td class="col-sm-2">
        <input type="text" name="year" class="form-control" />
      </td>
      <td class="col-sm-2">
        <input type="text" name="age" class="form-control" />
      </td>
      <td>
        <input type="button" class="btn btn-block btn-default" id="addrow" onclick="childrenRow()" value="+" />
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

我已经编辑了你给的几行，这样 + 按钮就不会出现在每一行。谢谢您的帮助！ :D

【参考方案2】：

用下面的函数替换你的函数

 function deleteRow(id)

document.getElementById(id).remove()


function childrenRow() 

  var table = document.getElementById("childTable");
  // GET TOTAL NUMBER OF ROWS 
  var x =table.rows.length;
  var id = "tbl"+x;
  var row = table.insertRow(x);
  row.id=id;
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);
  var cell5 = row.insertCell(4);
  var cell6 = row.insertCell(5);
  cell1.outerhtml = `<th> $x</th>`;
  cell2.innerHTML = ' <input type="text" name="name" class="form-control" />';
  cell3.innerHTML = ' <input type="text" name="school" class="form-control" />';
  cell4.innerHTML = ' <input type="text" name="year" class="form-control" />';
  cell5.innerHTML = ' <input type="text" name="age" class="form-control" />';
  cell6.innerHTML = '  <input type="button" class="btn btn-block btn-default" id="addrow" onclick="deleteRow(\''+id+'\')" value="Delete" /> '; 

【讨论】：

谢谢，它有效！是否有可能每当添加新行时，删除行自动替换添加按钮？

@spaceba，您能否详细说明一下，根据我的理解，您希望将按钮添加到最后一行并删除所有其他行的按钮！！！

对不起，我的意思是当用户点击添加按钮时，新行会自动在右侧出现一个删除按钮，以便他们可以根据需要删除新行。

好的，知道了，根据它修改答案，你现在可以检查了！！！

现在确实出现了，但是当用户点击按钮时该行不能被删除？