Question

使用Jquery我应该获得由php foreach循环生成的id并创建一个带有输入文本的新行，其中每个值将由jquery填充。简而言之就像内联编辑一样。不同之处在于，我为内联编辑添加了新行，而不是内联。请看看我到目前为止取得的进展并帮助我实现目标。

PHP Part 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 Part

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

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

1 个答案: