2

以下 jQuery 代码按预期工作（根据代码中的注释），本质上它的作用是

  1. 检测点击了哪个表格行，
  2. 遍历表的行并确定该行是否有输入，
  3. 如果是，则获取并存储该行中文本框和文本区域的值
  4. 从该行的 tds 中删除元素
  5. 并用存储值的标签替换输入
  6. 然后，在单击的行上，存储标签的值并
  7. 标签被替换为使用存储值填充的输入

这是相关的jQuery：

// Detect row clicked and switch that row's labels to populated textboxes for editing
$('#tblBranchCoverage').on('click', 'tr', function () {

// When the following is commented out, the inputs work
//  If this block of code isn't commented, none of the rows inputs are editable
// First set any other rows back to labels if they have textboxes
$(this).parent().children('tr').each(function () {
    if ($(this).find('input').length > 0) {
        // Row has textboxes
        var county = $(this).find('#txtEditCounty').val(),
            state = $(this).find('#txtEditState').val(),
            zips = $(this).find('#txtEditZips').val(),
            $td = $(this).find('td');

        // Clear the cells first
        $td.html('');

        // Put the populated labels back in
        $(this).find('.countyCovered').text(county);
        $(this).find('.stateCovered').text(state);
        $(this).find('.zipsCovered').text(zips);
    }
});

// Only run this if there aren't already textboxes in the current row
if ($(this).find('input').length === 0) {
    // Get the values of the cells before the row is cleared
    var county = $(this).find('td.countyCovered').text(),
        state = $(this).find('td.stateCovered').text(),
        zips = $(this).find('td.zipsCovered').text();

    // Clear the text from the selected row
    $(this).find('.countyCovered, .stateCovered, .zipsCovered').text('');

    // Add textboxes to the cells populated with their respective values
    $(this).find('td.countyCovered').append('<input type="text" id="txtEditCounty" value="' + county + '" style="width: 111px;" /><br />' +
        '<input type="submit" id="btnSubmitCoverageEdits" value="Save Edits" /><br />' +
        '<input type="submit" id="btnCancelCoverageEdits" value="Cancel" />');
    $(this).find('td.stateCovered').append('<input type="text" id="txtEditState" value="' + state + '" max-length="2" style="width: 22px;" />');
    $(this).find('td.zipsCovered').append('<textarea id="txtEditZips" cols="100">' + zips + '</textarea>');

    // Size the textarea to its contents
    $('#txtEditZips').flexible();
}
return false;
});

正如我所说，上述功能按预期工作，除了当单击行中的一个输入时，编辑光标立即消失（好像焦点立即从输入中移除）。但是当我注释掉第一块代码（在代码中注明）时，输入变成了预期的可编辑。

我为此设置了一个jsFiddle。

4

2 回答 2

2

一个简单的解决方案是将以下行添加到您的代码中。在这里演示

$('#tblBranchCoverage').on('click', ':input', function (event) {
    event.stopPropagation();
});

由于 javascript 中的事件冒泡而发生此问题。当您单击输入框时，在对输入执行单击后，事件将传递给父元素。所以我们只需要停止所有输入控件上的事件冒泡。 event.stopPropagation();将帮助您做到这一点。

于 2013-01-23T20:10:02.130 回答
1

演示：http: //jsfiddle.net/nHgXf/2/

更改的Javascript：

var editting = false;

// Detect row clicked and switch that row's labels to populated textboxes for editing
$('#tblBranchCoverage').on('click', 'tr', function () {
    if(!editting)
    {
        editting = true;
    // When the following is commented out, the inputs work
    //  If this block of code isn't commented, none of the rows inputs are editable
    // First set any other rows back to labels if they have textboxes
$(this).parent().children('tr').each(function () {
        if ($(this).find('input').length > 0) {
            // Row has textboxes
            var county = $(this).find('#txtEditCounty').val(),
                state = $(this).find('#txtEditState').val(),
                zips = $(this).find('#txtEditZips').val(),
                $td = $(this).find('td');

            // Clear the cells first
            $td.html('');

            // Put the populated labels back in
            $(this).find('.countyCovered').text(county);
            $(this).find('.stateCovered').text(state);
            $(this).find('.zipsCovered').text(zips);
        }
    });

    // Only run this if there aren't already textboxes in the current row
    if ($(this).find('input').length === 0) {
        // Get the values of the cells before the row is cleared
        var county = $(this).find('td.countyCovered').text(),
            state = $(this).find('td.stateCovered').text(),
            zips = $(this).find('td.zipsCovered').text();

        // Clear the text from the selected row
        $(this).find('.countyCovered, .stateCovered, .zipsCovered').text('');

        // Add textboxes to the cells populated with their respective values
        $(this).find('td.countyCovered').html('<input type="text" id="txtEditCounty" value="' + county + '" style="width: 111px;" /><br />' +
            '<input type="submit" id="btnSubmitCoverageEdits" value="Save Edits" /><br />' +
            '<input type="submit" id="btnCancelCoverageEdits" value="Cancel" />');
        $(this).find('td.stateCovered').html('<input type="text" id="txtEditState" value="' + state + '" max-length="2" style="width: 22px;" />');
        $(this).find('td.zipsCovered').html('<textarea id="txtEditZips" cols="100">' + zips + '</textarea>');

        // Size the textarea to its contents
        $('#txtEditZips').flexible();
    }
    }
    editting =false;
    return false;
});

基本上是因为您绑定到 click 事件，它不断使所有 javascript 发生，并导致 DOM 和选择出现问题

于 2013-01-23T19:58:04.450 回答