无法弄清楚为什么textarea不会保持可编辑状态

时间:2013-01-23 19:52:08

标签: jquery html-table row edit

以下jQuery代码按预期工作(代码中的每个注释),基本上它的作用是

  1. 检测单击了哪个表格行
  2. 遍历表的行并确定行中是否有输入
  3. 如果是,则抓取并存储文本框和textarea在该行中的值
  4. 从该行的tds中删除元素
  5. 并使用带有存储值的标签替换输入
  6. 然后,在单击的行上,存储标签的值并
  7. 标签将替换为填充了存储值的输入
  8. 这是相关的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

1 个答案:

答案 0 :(得分:1)

DEMO: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和选择问题