使用Jquery将行追加到PHP生成的表行

使用Jquery，我应该获得php foreach循环生成的id，并创建一个包含输入文本的新行，其中每个值都将由Jquery填充。简言之，它类似于内联编辑。不同之处在于，我添加新行以进行内联编辑，而不是内联编辑。请看我到目前为止取得的进展，并帮助我让它工作

PHP部分mysale.PHP：

<table>
   <tr>
      <th>id</th>
      <th>name</th>
      <th>receipt</th>
      <th>month</th>
    </tr><form action="" method="POST" id="saleEdi">
<?php
      foreach($sales as sale):
          echo '<tr>';
          echo "<td class='editSale'>{$sale['id']}</td>";//click here
          echo "<td class='sName'>{$sale['name']}</td>";
          echo "<td>{$sale['receipt']}</td>";
          echo "<td>{$sale['month']}</td>";
          echo '</tr>';
       endforeach;
?>

身份证件
名称
收据
月

Jquery部分

$(document).on("click",".editSale",function(){
var sale = $('.editSale').text();
var name = $('.editName').text(); 
var i=$('table tr').length;
    html += '<td><input type="text" name="saleid" value="'+$('.editSale').text(sale)+i+'"></td>';
    html += '<td><input type="text" name="name" value="'+$('.editName').text(name)+i+'"></td>';
  //and so on
    $('table').append(html);
    i++;
});

$（文档）。在（“单击”、“.editSale”上，函数（）{
var sale=$（'.editSale'）.text（）；
变量名称=$（'.editName'）.text（）；
变量i=$（'table tr'）。长度；
html+=''；
html+=''；
//等等
$（'table'）.append（html）；
i++；
});

---

问题是我无法让它工作。每当我单击每一个id或每一行本身时，我想在php生成的行下面的输入值中添加新行数据

如下所示更新您的代码

从您的代码中，我替换

$（'.editSale'）.text（）

到

$（this）.text（）。它将给出单击的元素文本

$（this.next（'td'）.text（）从单击元素的下一个td值中给出文本

HTML


身份证件
名称
收据
月
1.
名字1
1.
12
2.
名称2
10
10

JQUERY

 $(document).ready(function(){
   $(document).on("click",".editSale",function(){
     var sale = $(this).text();
     var name = $(this).next('td').text(); 
     var html = '';
     html += '<td><input type="text" name="saleid" value="'+sale+'"></td>';
     html += '<td><input type="text" name="name" value="'+name+'"></td>';
     $('table').append(html);
  });
 });

$（文档）.ready（函数（）{
$（文档）。在（“单击“，”.editSale”，函数（）上{
var sale=$（this.text（）；
var name=$（this.next（'td'）.text（）；
var html=''；
html+=''；
html+=''；
$（'table'）.append（html）；
});
});

更新2。在单击元素后追加行。在单击其他元素时也添加元素

$（文档）.ready（函数（）{
$（文档）。在（“单击“，”.editSale”，函数（）上{
$（'table'）.find（'.added'）.remove（）
var sale=$（this.text（）；
var name=$（this.next（'td'）.text（）；
var html=''；
html+=''；
html+=''；
html+=' :'；
html+=''；
html+=''；
$（this.parent（'tr'）。在（html）之后；
});
});
code中的.editNam选择器在哪里？同时将Var更改为Var。从Var销售到Var销售。将Var name添加到Var name比添加新行来编辑值更好吗？@William Janoti，但我想创建新行并使用该新行进行内联编辑。继续添加意味着？每当我单击时，它都会添加，而不是仅在单击的行下方添加。确定要将其添加到单击的行下方吗？让我更新代码'我会非常高兴。另外，只追加一次，并在单击其他行时删除追加的内容。非常感谢…这是预期的输出。
 $(document).ready(function(){
   $(document).on("click",".editSale",function(){
     var sale = $(this).text();
     var name = $(this).next('td').text(); 
     var html = '';
     html += '<td><input type="text" name="saleid" value="'+sale+'"></td>';
     html += '<td><input type="text" name="name" value="'+name+'"></td>';
     $('table').append(html);
  });
 });

 $(document).ready(function(){
   $(document).on("click",".editSale",function(){
    $('table').find('.appended').remove()
    var sale = $(this).text();
    var name = $(this).next('td').text(); 
    var html = '<tr class="appended">';
    html += '<td><input type="text" name="saleid" value="'+sale+'"></td>';
    html += '<td><input type="text" name="name" value="'+name+'"></td>';
    html += '<td>&nbsp:</td>';
    html += '<td>&nbsp;</td>';
    html += '</tr>';
    $(this).parent('tr').after(html);
  });
 });