-1

我的代码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();
});
4

3 回答 3

1

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.input元素应该从td元素的文本中获取它们的值

完成编辑

1.从输入元素中获取值

2.删除输入元素

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

于 2013-10-18T10:24:38.567 回答
0

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

这是更好的方法。

1）td用textbox like括起来

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

同样适用于所有tds 和disable它们。

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

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

只需启用textbox编辑。

检查JSFiddle中的工作

希望你能理解。

于 2013-10-18T10:07:30.273 回答
0

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

于 2013-10-18T10:16:15.167 回答