Jquery 更改表中的行

Jquery change row in table

本文关键字：Jquery      更新时间：2023-09-26

我的代码 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>

简讯

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

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.附加到您的TD输入元素

2.输入元素应从TD元素的文本中获取其值

完成编辑

1.从输入元素中获取值

2.删除输入元素

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

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

这是更好的方法。

1）用类似textbox将td括起来

<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 中的工作

希望你能理解。

希望这样的东西是你想要的伙计......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/

相关文章：