0

我有一个 HTML 表格，在每行的末尾有两个 2 按钮来更改或向表格添加新行。

我了解如何使用 jquery 在表中添加一行，但现在如果按下更改按钮，我想更改一行表中的数据。

请让我知道如何更改表格行的内容。我认为应该出现一个对话框窗口并允许用户输入一些值，然后单击 Enter 并查看更新的行。

这是表格代码：

<table class="table table-striped" id="table-visual-features">
    <tbody>
        <tr>
            <td>x</td>
            <td>Numeric</td>
            <td>Values to be mapped to the x-axis</td>
            <td>
                <button class="action_change">change</button>
                <button class="action-add-visual-feature">add</button>
            </td>
        </tr>
    </tbody>
</table>

这是添加操作的代码：

$('.action-add-visual-feature').on('click', function () {
    $('#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="btn btn-mini"><i class="icon-pencil"></i></button> <button class="btn btn-mini btn-danger action-remove-visual-feature"><i class="icon-trash icon-white"></i></button></td></tr>');
});
4

3 回答 3

1

试试这个并使用“numeric”和“xAxis”值来填充您的对话框进行编辑。

$('.action_change').on('click', function() {
    var numeric;
    var xAxis;
    $(this).closest('tr').each(function(){
    numeric = $(this).val();
    xAxis = $(this).val();
    });
    });

另请参阅此链接

于 2013-09-09T12:53:57.553 回答
0

在追加之前或之后，您可以使用.html()和修改内容.text()。

// Creating cells and setting content
var cell1 = $('<td />').text('Column #1');
var cell2 = $('<td />').text('Column #2');
var cell3 = $('<td />').text('Column #3');

// Creating a row and appending cells
var row = $('<tr />');
row.append(cell1).append(cell2).append(cell3);

// appending the row
$('table').append(row);

// Modifying text of cell1 after appending
cell1.text('Live editing, whoop!');
于 2013-09-09T12:44:30.130 回答
0

看看这个简单的内联编辑选项。同样可以很容易地扩展为显示一个对话框。

$('.action_change').live('click', function(){
    $($(this).closest('tr').children('td')[1]).html('<input id="row-value-edit" type="text" /><button class="row-value-ok">OK</button>');
});

$('.row-value-ok').live('click', function(){
    $(this).parent('td').text($('#row-value-edit').val());
});

此代码允许用户内联编辑表格数据。在文本框中输入的新数据将重新分配给表格列。

于 2013-09-09T13:15:24.067 回答