使用jquery或javascript在单击按钮时添加动态行，其中一些值为空_Javascript_Php_Jquery_Html

使用jquery或javascript在单击按钮时添加动态行，其中一些值为空

javascript php jquery html

使用jquery或javascript在单击按钮时添加动态行，其中一些值为空,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我设计了一个表格，其中有一行文本框、下拉列表、一些内容和一个按钮。这些值实际上来自数据库，并使用php显示。当我点击按钮时，它应该再次用按钮复制表的最后一行。如果我点击动态行的按钮，同样的事情应该发生。我尝试了下面的代码，但不起作用，如果我把按钮放在桌子外面，代码就起作用了我用的是连上而不是活的，它不工作，请帮忙 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <

我设计了一个表格，其中有一行文本框、下拉列表、一些内容和一个按钮。这些值实际上来自数据库，并使用php显示。当我点击按钮时，它应该再次用按钮复制表的最后一行。如果我点击动态行的按钮，同样的事情应该发生。我尝试了下面的代码，但不起作用，如果我把按钮放在桌子外面，代码就起作用了

我用的是连上而不是活的，它不工作，请帮忙

   <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
    <body>
    <table id=`tableid`>
    <tr><td><input type="text" name="row1"></td><td>
    <select><option>Apple</option><option>Mango</option></select>
     </td><td><button id='buttonid'>Add Row</button></td><td>content1</td><td>content2</td></tr>
     </table>
   <script>
       $(document).ready(function() {
       $( "#buttonid" ).live( "click",  function(){
      var cnt = $('#tableid tr:last').clone();
      cnt.find('td:nth-last-child(2)').empty(); //Last but one td
      cnt.find('td:nth-last-child(1)').empty(); //Last td
      $('#tableid').append(cnt);
      });

      });
      </script></body></html>

dut到克隆，按钮应该有类，而不是id

<button class='button'>

编辑：如前所述，替换也很重要

<table id=`tableid`>

与

不是

不确定什么对您不起作用

您应该从其父项进行遍历，该父项不会更改，因为您要删除按钮并在单击按钮后附加它

i、 e

但在第一次单击之后，这将不起作用，因为id对于每个元素都应该是唯一的，所以不要在按钮上使用id属性，而是使用class属性

<table id='tableid'>
 <tr><td><input type="text" name="row1"></td><td>
 <select><option>Apple</option><option>Mango</option></select>
 </td><td><button class='buttonid'>Add Row</button></td><td>content1</td><td>content2</td></tr>
 </table>

你只有一个tr吗？这是一个类似的tr。看看这是否有帮助。@karan3112 add对这里的动态元素不起作用。这里是更新的。使用$document.on这个例子是在live上工作，如果我复制粘贴并在本地运行，它不起作用。您编写了$tableid。在buttonid上，单击，而不是$tableid。onclick，buttonid和$tableid。live click，.buttonid，而不是$tableid。单击，.buttonid，现在您有了$tableid。单击，buttonid而不是$tableid。单击，.buttonid在第二个脚本中：在给出类而不是id@Xlander它确实有效。也许OP没有解决表id引号的问题。很抱歉，什么是“OP”？@Regent是的，live被替换为on，但我看到OP使用的是jQuery v1.11.0。我只是想指出，这可能是他的代码不起作用的原因。我们不能用一个答案教所有的东西：好吧，是的，这肯定是原因，因为.live在jQuery 1.9中被删除了。@Regent Ohh，是的。。。当我看到很多1时，我想到1.11是一个非常古老的版本：

<table id="tableid">

<table id="tableid">

<table id=`tableid`>

$(document).ready(function() {
  $("#tableid" ).on( "click", "#buttonid",  function(){
    var cnt = $('#tableid tr:last').clone();
    cnt.find('td:nth-last-child(2)').empty(); //Last but one td
    cnt.find('td:nth-last-child(1)').empty(); //Last td
    $('#tableid').append(cnt);
  });
 });

<table id='tableid'>
 <tr><td><input type="text" name="row1"></td><td>
 <select><option>Apple</option><option>Mango</option></select>
 </td><td><button class='buttonid'>Add Row</button></td><td>content1</td><td>content2</td></tr>
 </table>

 $(document).ready(function() {
   $("#tableid" ).on( "click", ".buttonid",  function(){
    var cnt = $('#tableid tr:last').clone();
    cnt.find('td:nth-last-child(2)').empty(); //Last but one td
    cnt.find('td:nth-last-child(1)').empty(); //Last td
    $('#tableid').append(cnt);
  });
 });