javascript - 将具有类名的特定 td 之后的所有 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-class 之后的所有 td 替换为新的 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()的基本思想

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

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