替换特定td之后的所有tds，该td具有带输入的新td的类名

Question

我有以下HTML代码：

<a id="addNewItem" onclick="addNewItem()" class="btn">Add New Item</a>

<table>
 <tbody>
  <tr>
   <td>test</td>
   <td>test</td>
   <td class="purpose-class">test</td>
   <td>test</td>
   <td>test</td>
   <td>test</td>
  </tr>
  <tr>
   <td>test</td>
   <td>test</td>
   <td class="purpose-class">test</td>
   <td>test</td>
   <td>test</td>
   <td>test</td>
  </tr>
 </tbody>
</table>

我想要实现的是当我点击按钮时，然后当我点击所需的行来替换.purpose类之后的所有td时，新的td将在它们之间输入。

js功能：

function addNewItem() {

  $tr = $('table tbody tr');

  var newItem='<td><input type="text" value=""></td>'+
               <td><input type="text" value=""></td>'+
               <td><input type="text" value=""></td>';


 $tr.click(
    function() {
      $(this) somehow and $('td.purpose-class').nextAll().replaceWith(newItem);
    }
);

因此，点击一行时的预期结果如下：

<table>
 <tbody>
  <tr>
   <td>test</td>
   <td>test</td>
   <td class="purpose-class">test</td>
   <td><input type="text" value=""></td>
   <td><input type="text" value=""></td>
   <td><input type="text" value=""></td>
  </tr>
  <tr>
   <td>test</td>
   <td>test</td>
   <td class="purpose-class">test</td>
   <td>test</td>
   <td>test</td>
   <td>test</td>
  </tr>
 </tbody>
</table>

Answer 1

使用remove（）和append（）

的基本思路

＆＃13;

＆＃13;

var $tr = $('table tbody tr');

var newItem = '<td><input type="text" value=""></td>' +
  '<td><input type="text" value=""></td>' +
  '<td><input type="text" value=""></td>';


$tr.on("click", function() {
    var cell = $(this).find('td.purpose-class');
    if (!cell.is(".added")) {
      cell.addClass("added")
      cell.nextAll().remove();
      $(this).append(newItem)
    }
  }
);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>test</td>
      <td>test</td>
      <td class="purpose-class added">test</td>
      <td><input type="text" value=""></td>
      <td><input type="text" value=""></td>
      <td><input type="text" value=""></td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td class="purpose-class">test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请参阅代码段可能会对您有所帮助

function addNewItem() {

  $tr = $('table tbody tr');

  var newItem='<td><input type="text" value=""></td>'+
               '<td><input type="text" value=""></td>'+
               '<td><input type="text" value=""></td>';

 $tr.click(function() {
      $('td.purpose-class').nextAll().replaceWith(newItem);
    }
);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="addNewItem" onclick="addNewItem()" class="btn">Add New Item</a>

<table>
 <tbody>
  <tr>
   <td>test</td>
   <td>test</td>
   <td class="purpose-class">test</td>
   <td>test</td>
   <td>test</td>
   <td>test</td>
  </tr>
  <tr>
   <td>test</td>
   <td>test</td>
   <td class="purpose-class">test</td>
   <td>test</td>
   <td>test</td>
   <td>test</td>
  </tr>
 </tbody>
</table>

Answer 3

见下面的代码

＆＃13;

＆＃13;

$('#addNewItem').click(function(){
  $tr = $('table tbody tr');
  var newItem='<td><input type="text" value=""></td>';
  $tr.click(function() {
    $(this).find('td.purpose-class').nextAll().replaceWith(newItem);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="addNewItem" href="#" class="btn">Add New Item</a>

<table>
 <tbody>
  <tr>
   <td>test</td>
   <td>test</td>
   <td class="purpose-class">test</td>
   <td>test</td>
   <td>test</td>
   <td>test</td>
  </tr>
  <tr>
   <td>test</td>
   <td>test</td>
   <td class="purpose-class">test</td>
   <td>test</td>
   <td>test</td>
   <td>test</td>
  </tr>
 </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;