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

Question

使用 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++;
});

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

Answer 1

更新您的代码，如下所示。 DEMO

从您的代码中，我将 $('.editSale').text(); 替换为 $(this).text(); 。它将给出被点击的元素文本。

$(this).next('td').text(); 给出被单击元素的下一个 td 值的文本

HTML

<table>
 <tr>
  <th>id</th>
  <th>name</th>
  <th>receipt</th>
  <th>month</th>
 </tr>
 <tr>
    <td class='editSale'>1</td>
    <td class='sName'>name 1</td>
    <td>1</td>
    <td>12</td>
 </tr>
 <tr>
    <td class='editSale'>2</td>
    <td class='sName'>name 2</td>
    <td>10</td>
    <td>10</td>
 </tr>
</table>

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);
  });
 });

更新2。在单击的元素之后追加行。单击其他元素时还会附加元素。 DEMO

 $(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);
  });
 });