更換所有TDS以下具有新的TD與輸入

Question

一個類名的特定TD我有以下的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> 

當我按一下按鈕，之後當我點擊我要實現的是在所需的行上，用新的td來代替.purpose-class之後的所有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

看到的片段可能會幫助你

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>

使用除去（）和append（）

Answer 2

基本思想

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>

Answer 3

見下面代碼

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

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