Enabiling文本框與編輯按鈕並更新新的文本

Question

HTML代碼：

<table width="50%" align="center" border="0" class="check-table" cellspacing="1" cellpadding="5"> 
    <tr> 
     <th width="11%"><input type="checkbox" class="checkall" /></th> 
     <th width="44%">Product Name</th> 
     <th width="24%">Quantity<br /></th> 
     <th width="21%">Action</th> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" /></td> 
     <td align="center"><input type="text" value="Produt One" disabled="disabled" /></td> 
     <td align="center"><input type="text" value="" disabled="disabled" /></td> 
     <td align="center"><a href="#">Edit</a> | <a href="#">Delete</a></td> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" /></td> 
     <td align="center"><input type="text" disabled="disabled" value="Product Two" /></td> 
     <td align="center"><input type="text" value="" disabled="disabled" /></td> 
     <td align="center"><a href="#">Edit</a> | <a href="#">Delete</a></td> 
    </tr> 
</table> 

jQuery代碼：

$(function(){ 
    $('.checkall').on('click', function(){ 
     $(this).closest('.check-table').find(':checkbox').prop('checked',this.checked); 
    }) 

    $(".check-table tr td:nth-child(4) a:last-child").on("click", function() { 
     $(this).closest(".check-table tr").remove(); 
    }); 

    $('.check-table tr td:nth-child(4) a:first-child').on('click', function(){ 
     $(this).add(".check-table tr td:nth-child(2) input[type=text], .check-table tr td:nth-child(3) input[type=text]").prop('disabled',false); 
    }) 
}) 

Answer 1

我相依爲命編輯鏈接類編輯：

<td align="center"><a href="#" class="edit">Edit</a> | <a href="#">Delete</a></td> 

然後對於js部分：

$('body').on('click','.edit', function(){ 
    $(this).parents('tr').find('input').attr('disabled',false); 
}); 

http://jsfiddle.net/8LR9R/

關於你的第二resquest，你可以做這樣的事情：

$('body').on('click','.edit', function(){ 
    if($(this).hasClass('on')){ 
     disabled = true; 
     str = 'Edit'; 
     $(this).removeClass('on'); 
    }else{ 
     disabled = false; 
     str = 'Save'; 
     $(this).addClass('on'); 
    } 
    $(this).parents('tr').find('input').attr('disabled',disabled); 
    $(this).text(str); 
}); 

http://jsfiddle.net/8LR9R/3/