Question

我正在创建一个表单，在按钮点击上添加一个表行到目前为止工作正常但我想在按钮单击生成的每一行旁边都有一个删除按钮，但不是在第一行。我搜索了很多博客，但想出了没有人可以指导我做这件事吗？我只是个初学者。这是我的剧本：

<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript" type="text/javascript">
var i=1;
function addRow()
{
          var tbl = document.getElementById('table1');
          var lastRow = tbl.rows.length;
          var iteration = lastRow - 1;
          var row = tbl.insertRow(lastRow);

          var firstCell = row.insertCell(0);
          var el = document.createElement('input');
          el.type = 'text';
          el.name = 'name' + i;
          el.id = 'name' + i;
          el.size = 20;
          el.maxlength = 20;
          firstCell.appendChild(el);

          var secondCell = row.insertCell(1);
          var el2 = document.createElement('input');
          el2.type = 'text';
          el2.name = 'address' + i;
          el2.id = 'address' + i;
          el2.size = 20;
          el2.maxlength = 20;
          secondCell.appendChild(el2);

          var thirdCell = row.insertCell(2);
          var el3 = document.createElement('input');
          el3.type = 'text';
          el3.name = 'contactNum' + i;
          el3.id = 'contactNum' + i;
          el3.size = 20;
          el3.maxlength = 20;
          thirdCell.appendChild(el3);
         frm.h.value=i;
                  i++;


}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title></head>

<body>
<form action="submit.php" method="post" name="frm" id="frm">
<table width="40%" border="2" cellpadding="0" cellspacing="0" id="table1">
  <tr>
    <td><strong>Name</strong></td>
    <td><strong>Address</strong> </td>
    <td><strong>Contact Num</strong> </td>
  </tr>
  <tr>
    <td><input name="name" type="text" id="name" size="20" maxlength="20" /></td>
    <td><input name="address" type="text" id="address" size="20" maxlength="20" /></td>
    <td><input name="contactNum" type="text" id="contactNum" size="20" maxlength="12" /></td>
  </tr>

</table>
<input type="button" value="Add" onclick="addRow();" />
<input name="Submit" type="submit" value="Submit" />
<label>
<input name="h" type="hidden" id="h" value="0" />
</label>
</form>
</body>
</html>

Answer 1

我认为您正在寻找add row jquery插件。

Answer 2

您可以将deleteRow() method与rowIndex property一起使用。尝试使用onClick（this）调用该行中的按钮。

Answer 3

最好尝试搜索数据表..它们可以直接使用。您不需要更多代码。您还可以嵌入许多其他功能。

单击按钮时动态添加和删除表行

3 个答案: