Question

我是Jquery的新手，所以请不要对我如此努力。我尝试做的是直接从表格单元格编辑行数据。这是一个我陷入困境并需要帮助的工作过程。

想象一下，我有一个tableID“tabledata”，我想点击一个单元格（col / row），该单元格值将更改为文本框（可编辑）。用户编辑该值后，将使用Ajax进行保存。如果用户在编辑模式下决定不更改值，则用户可以单击屏幕上的某个位置中止，单元格值将恢复为原始值（不再是文本框）。

我还在处理作品，但我现在面临的问题是，当用户点击单元格时，它会切换到可编辑模式（文本框），然后用户点击文本框进行编辑，文本框会进入因为“鼠标功能”而放弃原始值。

我该怎样防止这种情况？用例子做任何更好的方法都会非常感激。

这是我的Jquery代码：

$(function() {

    var array = []
    array[0] = '';  // Current Row
    array[1] = '';  // Current Col

    var oldValue
    var updateID; // Updating ID

     $("#tabledata td").click(function(e) {   
        // I NEED TO FIND THE CLOSEST TD 
        var column_num = parseInt( $(this).index() ) ;
        var row_num = parseInt( $(this).parent().index() ); 
        //alert("updateID: " + updateID + " |\n Row_num = " + row_num + "  |\n Column_num = " + column_num + ' |\n NewValue: ' + oldValue);         

        oldValue = ($(this).html());
        updateID = $("#tabledata tr:eq(" + row_num + ") td:eq(0)").text();

        $("#tabledata tr:eq(" + row_num + ") td:eq(" + column_num + ")").html("<input type='text' name='cstage' value='Test123'>");
        array[0] = row_num;
        array[1] = column_num;
        //getCellPosition()

        e.preventDefault(); // <-- consume event
        e.stopImmediatePropagation();
        return false;

    });

    putOldValueBack = function()
    {
        //alert("Change back value for " + array[1] + ' - ' + array[2] + " - " + oldValue); 
        $("#tabledata tr:eq(" + array[0] + ") td:eq(" + array[1] + ")").html(oldValue); 
    }

});


$(document).click(function (e)
{
    putOldValueBack()

});

表格的HTML代码：

<table id="tabledata">
    <tr>
        <th>RecID</th>
        <th>Col1</th>
        <th>Col2</th>
    </tr>
    <tr>
        <td>RecID</td>
        <td>Val1.1</td>
        <td>Val1.2
    </tr>
    <tr>
        <td>RecID</td>
        <td>Val2.1</td>
        <td>Val2.2
    </tr>
    <tr>
        <td>RecID</td>
        <td>Val3.1</td>
        <td>Val3.2
    </tr>
</table>

Answer 1

我怀疑这可以解决它，但不能确切地说。您必须使用该事件（并且最好不要使用mouseup，但只需单击 - 它应该可以正常工作。

请注意，我删除了未更改的代码位。

$("#tabledata td").click(function(e) { // <-- event as argument

    // some stuff

    e.preventDefault(); // <-- consume event
    e.stopImmediatePropagation();
    return false;
});

$(document).click(function (e) { // <-- now using click
    putOldValueBack()
});

这是一个简单的单元格编辑器impl：http://jsfiddle.net/9KEGd/

$(function () {
    $("#tabledata td").click(function (e) {
        e.preventDefault(); // <-- consume event
        e.stopImmediatePropagation();

        $this = $(this);

        if ($this.data('editing')) return;  

        var val = $this.text();

        $this.empty()
        $this.data('editing', true);        

        $('<input type="text" class="editfield">').val(val).appendTo($this);
    });

    putOldValueBack = function () {
        $("#tabledata .editfield").each(function(){
            $this = $(this);
            var val = $this.val();
            var $td = $this.closest('td');
            $td.empty().html(val);
            $td.data('editing', false);

        });
    }

    $(document).click(function (e) {
        putOldValueBack();
    });
});

这是一个取消的编辑器（点击输入保存，Esc取消，CLick外面取消）

http://jsfiddle.net/9KEGd/2/

$(function () {

    function revert() {
        $("#tabledata .editfield").each(function () {
            var $td = $(this).closest('td');
            $td.empty();
            $td.text($td.data('oldText'));
            $td.data('editing', false);

            // canceled            
            console.log('Edit canceled.');
        });
    }

    function save($input) {
        var val = $input.val();
        var $td = $input.closest('td');
        $td.empty();
        $td.text(val);
        $td.data('editing', false);

        // send json or whatever
        console.log('Value changed');
    }


    $('#tabledata td').on('keyup', 'input.editfield', function (e) {
        if (e.which == 13) {
            // save
            $input = $(e.target);
            save($input);
        } else if (e.which == 27) {
            // revert
            revert();
        }
    });

    $("#tabledata td").click(function (e) {

        // consuem event
        e.preventDefault();
        e.stopImmediatePropagation();

        $td = $(this);

        // if already editing, do nothing.
        if ($td.data('editing')) return;
        // mark as editing
        $td.data('editing', true);

        // get old text
        var txt = $td.text();

        // store old text
        $td.data('oldText', txt);

        // make input
        var $input = $('<input type="text" class="editfield">');
        $input.val(txt);

        // clean td and add the input
        $td.empty();
        $td.append($input);
    });


    $(document).click(function (e) {
        revert();
    });
});

Jquery - 直接编辑表行

1 个答案: