Question

我想要点击按钮上的新行。

<html>
<table id="tbl">
   <tr>
      <td><input type="text" name="links" /></td>
      <td><input type="text" name="keywords" /></td> 
      <td><input type="text" name="violationtype" /></td>
      <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"/></td>          
    </tr>
</table>
<input type="submit" class="button" value="Add another line" onclick="addField(this);" />
</html>

javascript：

window.SomeDeleteRowFunction = function SomeDeleteRowFunction(o) {
     var p=o.parentNode.parentNode;
     p.parentNode.removeChild(p);
}

当我第一次点击提交按钮时，整个表格被插入，之后我点击提交按钮第二次只有<tr>插入现有表格。

Answer 1

试试这个，在添加行按钮中添加一个类（例如：add_another）

＆＃13;

$('document').ready(function() {
  $('.add_another').click(function() {
      $("#tbl").append('<tr><td><input type="text" class="txtbox" value="" />  </td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td></tr>');
   });
})

＆＃13;

<html>
<head>
  <script   src="https://code.jquery.com/jquery-1.12.1.js"   integrity="sha256-VuhDpmsr9xiKwvTIHfYWCIQ84US9WqZsLfR4P7qF6O8="   crossorigin="anonymous"></script>
</head>  
<table id="tbl">
   <tr>
      <td><input type="text" name="links" /></td>
      <td><input type="text" name="keywords" /></td> 
      <td><input type="text" name="violationtype" /></td>
      <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"/></td>          
    </tr>
</table>
<input type="submit" class="button add_another" value="Add another line"/>
</html>

＆＃13;

Here is the fiddle

Answer 2

没有jQuery，你可以使用这个JS函数

function addField( table ){

  var tableRef = document.getElementById(table);
  var newRow   = tableRef.insertRow(-1);

  var newCell  = newRow.insertCell(0);
  var newElem = document.createElement( 'input' );
  newElem.setAttribute("name", "links");
  newElem.setAttribute("type", "text");
  newCell.appendChild(newElem);

  newCell = newRow.insertCell(1);
  newElem = document.createElement( 'input' );
  newElem.setAttribute("name", "keywords");
  newElem.setAttribute("type", "text");
  newCell.appendChild(newElem);

  newCell = newRow.insertCell(2);
  newElem = document.createElement( 'input' );
  newElem.setAttribute("name", "violationtype");
  newElem.setAttribute("type", "text");
  newCell.appendChild(newElem);

  newCell = newRow.insertCell(3);
  newElem = document.createElement( 'input' );
  newElem.setAttribute("type", "button");
  newElem.setAttribute("value", "Delete Row");
  newElem.setAttribute("onclick", 'SomeDeleteRowFunction(this)')
  newCell.appendChild(newElem);
}

你必须这样称呼它：
（不要使用addField( this )，定义应添加行的表的ID addField( tableID )）

<html>
<table id="tbl">
   <tr>
      <td><input type="text" name="links" /></td>
      <td><input type="text" name="keywords" /></td> 
      <td><input type="text" name="violationtype" /></td>
      <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"/></td>          
    </tr>
</table>
<input type="submit" class="button" value="Add another line" onclick="addField('tbl');" />

这是小提琴：https://jsfiddle.net/s5jx0ftg/

单击时添加表行按钮

2 个答案: