javascript - 将带有隐藏样式属性行的动态表列复制到 textarea jQuery

Question

我是 jQuery 的新手，在为我的表格完成我想要的特定功能时遇到了一些麻烦。

我有一个动态排序的数据库列表，我希望能够创建一个文本区域，其中包含单击列标题时来自特定列的文本。我从这个 http://jsfiddle.net/4BwGG/3/ 中使用的代码中获得了一些功能但这里有一些我无法弄清楚的事情:

我使用 style="display: none" 隐藏了表中的一些行<tr>内的属性(property)标记，当脚本解析所有内容时，来自那些隐藏行的信息也会包含在内。如何进行检查以便仅将显示的行复制到文本区域？

这是一行条目的样子:

<tr filtermatch="false" style="display: none;">
  <td>< a href="http://example.edu">Tommy Trojan< /a>< /td>   
  < td>123-555-1231< /td>
  < td>Statue Man< /td>
  < td>[LTS1] [LTS2] [PM] [PM2] [TA1] [TA2] < /td>
  < td>tommy@example.edu< /td>
< /tr>` 

函数如下:

function SelectColumn(index, tableId) {
    var columnText = 'You selected:\n\n';
    var columnSelector = '#' + tableId + ' tbody > tr > td:nth-child(' + (index + 1) + ')';
    var cells = $(columnSelector);

    // clear existing selections
    if (window.getSelection) { // all browsers, except IE before version 9
        window.getSelection().removeAllRanges();
    }


    if (document.createRange) {
        cells.each(function(i, cell) {
            var rangeObj = document.createRange();
            rangeObj.selectNodeContents(cell);
            window.getSelection().addRange(rangeObj);
            columnText = columnText + '\n' + rangeObj.toString();
        });
    }
    else { // Internet Explorer before version 9
        cells.each(function(i, cell) {
            var rangeObj = document.body.createTextRange();
            rangeObj.moveToElementText(cell);
            rangeObj.select();
            columnText = columnText + '\n' + rangeObj.toString();
        });
    }

    alert(columnText);
}

Answer 1

尝试将代码包装在检查 tr 可见性的条件语句中。

例如:

if (document.createRange) {
    cells.each(function(i, cell) {
        if ($(cell).closest('tr').is(':visible')) {
            var rangeObj = document.createRange();
            rangeObj.selectNodeContents(cell);
            window.getSelection().addRange(rangeObj);
            columnText = columnText + '\n' + rangeObj.toString();
        }
    });
}

当然，您也想在 else block 中做同样的事情。但郑重声明，jsFiddle 在 IE7 中对我不起作用(它抛出关于不受支持的属性或方法的错误)。

我知道您没有询问，但除非您需要实际选择 列，否则我会重构代码。如果您希望该列显示处于选中状态，我可能会添加一些 CSS。

其他人可能会进一步改进代码。但这是我的建议。我添加了评论来解释我做了什么以及为什么。

function SelectColumn(index, tableId) {
    // cache the table selector in a local variable
    // because we are going to use it more than once
    var columnText = 'You selected:\n\n',
        table = $('#' + tableId),
        cells = table.find('td:nth-child(' + (index + 1) + ')');

    // reset the background color of all cells
    table.find('td').css('background-color', '#fff');

    cells.each(function(i, cell) {
        // turn cell into a jQuery object and cache it
        // because we are going to use it more than once
        cell = $(cell);

        if (cell.closest('tr').is(':visible')) {
            // get the cell text and trim it
            // because different browsers treat newlines differently
            columnText += $.trim(cell.text()) + '\n';

            // set a background color on the selected cells
            cell.css('background-color', '#ccc');
        }
    });

    alert(columnText);
}