Question

HTML code：

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

对于你的第二次重新招募，你可以这样做：

$('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/

使用编辑按钮启用文本框并更新新文本

1 个答案: