Question

我的代码http://jsfiddle.net/Vds69/如果我点击行末尾的按钮，我想用新值更改表格中的当前行。请帮我写一些动作来改变行

HTML

<div class="row-fluid">                            
    <div class="btn-group">
        <button class="btn btn-primary action-add-visual-feature"> + new visual feature </button>
        <button class="btn btn-danger action-remove-visual-features"> Remove all features</button>
    </div>
</div>

JQUERY

$('.action-remove-visual-features').on('click', function() {
    console.log("action-remove-visual-features");
    $('#table-visual-features tbody').html('');
});

$('.action-add-visual-feature').on('click', function() { 
    console.log("action-add-visual-feature");  

    $('#table-visual-features tbody').append('<tr><td>x</td><td>Numeric</td><td>Values to be mapped to the x-axis</td><td><button class="action-change">edit</button> <button class="btn btn-mini btn-danger action-remove-visual-feature">remove</button></td></tr>');
});


$('#table-visual-features tbody').on('click', 'tr button.action-remove-visual-feature', function(e) {
    console.log("action-remove-visual-feature!!");
    console.log("e action  = ", e);
    $(this).parents('tr').remove();
});

Answer 1

您无法手动编辑HTML表格。 必须以编程或HTML方式完成。

这是更好的方法。

1）将 td 与 textbox 一起包括在内

<td><input disabled type="text" value="x"/></td>

同样适用于所有 td 和 disable 。

2）然后，对于 edit ，添加 click 这样的功能

$(document).on('click', '.action-change', function () {
    $(this).parent().parent().find('input').prop('disabled', false);
});

只需启用textbox即可进行编辑。

检查JSFiddle

中的工作情况

希望你明白。

Answer 2

希望像这样的东西是你想要的伴侣...... Juz暂时给出了一些静态值......

$('#table-visual-features tbody').on('click','.action-change',function () {
    $(this).parent().siblings('td:eq(0)').html('Visual');
    $(this).parent().siblings('td:eq(1)').html('Alpahabet');
    $(this).parent().siblings('td:eq(2)').html('123');
});

小提琴

http://jsfiddle.net/tRhHt/

Answer 3

HTML5解决方案可以通过附加以下功能

$('#table-visual-features tbody').on('click', 'tr button.action-change', function (e) {
            if ($(this).hasClass("changing")) {
                var $parentRow = $(this).parents('tr').eq(0);
                $(this).removeClass("changing");
                $parentRow.removeClass("changing");
                $(this).text("edit");
                /*$('.action-change').parents('tr').eq(0).find('td').attr("contenteditable","false");*/
                $parentRow.find('td').attr("contenteditable","false");
            } else {
                var $parentRow = $(this).parents('tr').eq(0);
                $(this).addClass("changing");
                $parentRow.addClass("changing");
                $(this).text("stop-edit");
                $parentRow.find('td').attr("contenteditable", "true");
            }
        });

CSS

tr.changing td{
    border:1px solid green;
}

http://jsfiddle.net/Vds69/8/

否则，您必须执行以下操作，

编辑时

1.append到你的td输入元素

2.input elements应该从td元素的文本中获取它们的值

完成编辑

1.设置输入元素的值

2.删除输入元素

3.将值设置为td元素的文本。

Jquery在表中更改行

3 个答案: