Question

如何通过使用jquery模式对话框动态更改tablecell值。我使用javascript创建了表。在这里，我添加了代码，它将通过对话框显示表格单元格值。在此代码中，它将在文本框中显示表格单元格值，我可以更改它，但我无法保存它。

$(function () {

    $(function(){
    $("#inttbl td").click(function(){
    var selectValue;
    selectValue = $(this).html();
    $("#select_cell_display_div").html("Edit The Value<br><br><input type='text' id='namefield' value='"+selectValue+"'>");
    $( "#dialog-modal" ).dialog
            ({
            height: 240,
            modal: true,
              buttons: {
                "Save": function(){
                console.log('save clicked');
                    var select= document.getElementById('namefield').value
                    alert(select);
                    }
                }
            });
            });
    });

Html代码是：

<div id="dialog-modal" title="Selected Value">
<span id="select_cell_display_div"></span> 
</div>`

Answer 1

一种方法是缓存您单击的单元格的初始DOM查找，以便设置单元格值：

$(function () {
    $("#inttbl td").click(function (e) {
        var cell = $(this), // cache lookup
            selectValue = cell.html();
        $("#select_cell_display_div").html("Edit The Value<br><br><input type='text' id='namefield' value='" + selectValue + "'>");
        $("#dialog-modal").dialog({
            height: 240,
            modal: true,
            buttons: {
                "Save": function () {
                    console.log('save clicked');
                    var select = document.getElementById('namefield').value
                    alert(select);
                    cell.html(select); // use cached lookup to set the cell value
                }
            }
        });
    });
});

如何通过模态对话框使用javascript动态更改HTML表格内容？

1 个答案: