Javascript 将具有隐藏样式属性行的动态表列复制到textarea jQuery

我对jQuery非常陌生，在完成我想要的表的特定函数时遇到了一些困难

我有一个动态排序的db列表，我希望能够创建一个textarea，在单击列标题时包含来自特定列的文本。我从代码中获得了一些功能，我在这里使用了这些功能，但有些东西我就是搞不清楚：

我使用

标记中的

style=“display:none”

属性隐藏了表中的一些行，当脚本解析所有内容时，这些隐藏行中的信息也会被包括在内。如何进行检查，以便仅将显示的行复制到文本区域

以下是一行条目的外观：

<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>` 

---

尝试将代码包装在条件语句中，以检查

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块中执行相同的操作。但要说明的是，JSFIDLE在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);
}

---

如果您使用jquery，它将使事情变得非常简单。 要仅选择可见元素，可以使用：在jquery中可见

$(document).ready(function(){
    var textAreaContent=[];
    $('tr:visible').each(function(){
        var content=$('<div />').append($(this).clone()).html();
        textAreaContent.push(content);
    });
    $('.textarea').val(textAreaContent.join(''));
});

$（文档）.ready（函数（）{
var textAreaContent=[]；
$（'tr:visible'）。每个（函数（）{
var content=$（''）.append（$（this.clone（））.html（）；
textAreaContent.push（内容）；
});
$（'.textarea'）.val（textAreaContent.join（''）；
});

检查JSFIDLE

选择的另一个选项是使用过滤器。如果要在其他条件下进行筛选，这也很有用

$(document).ready(function(){
    var textAreaContent=[]; 
    $('tr').filter(function(){ return $(this).css('display')!='none';}).each(function(){
        var content=$('<div />').append($(this).clone()).html();
        textAreaContent.push(content);
    });
    $('.textarea').val(textAreaContent.join(''));
});

$（文档）.ready（函数（）{
var textAreaContent=[]；
$（'tr'）.filter（函数（）{return$（this）.css（'display'）！='none'；}）.each（函数（）{
var content=$（''）.append（$（this.clone（））.html（）；
textAreaContent.push（内容）；
});
$（'.textarea'）.val（textAreaContent.join（''）；
});

Jsfiddle：

$(document).ready(function(){
    var textAreaContent=[]; 
    $('tr').filter(function(){ return $(this).css('display')!='none';}).each(function(){
        var content=$('<div />').append($(this).clone()).html();
        textAreaContent.push(content);
    });
    $('.textarea').val(textAreaContent.join(''));
});