使用jQuery从html表中动态选择列

Question

我有一个示例fiddle here，其中包含一个带打印按钮的html表。我正在打印整个表格，

function printpage() {
    var data = '<table border="1" cellspacing="0"><tr><td colspan="4">Sample Report</td></tr>' + document.getElementsByTagName('table')[0].innerHTML + '</table>';
    data += '<br/><button onclick="window.print()"  class="noprint">Print the Report</button>';
    data += '<style type="text/css" media="print"> .noprint {visibility: hidden;} </style>';
    myWindow = window.open('', '', 'width=800,height=600');
    myWindow.innerWidth = screen.width;
    myWindow.innerHeight = screen.height;
    myWindow.screenX = 0;
    myWindow.screenY = 0;
    myWindow.document.body.innerHTML = data;
    myWindow.focus();
}

但是我想在打印预览中仅包含包含非零值的列，如下所示：

怎么可能？

Answer 1

如果我理解正确，您不需要删除所有具有0值的单元格，只需删除所有值均为0的列。 在你的打印功能中添加这个jquery片段：

var printableTable = $("table").clone();
var columnLen = printableTable.find("tr:nth-child(1)").find("th").size();

for(var i=1; i<=columnLen; i++)
{
    var sum = 0;
    printableTable.find("tr td:nth-child("+i+")").each(function() 
    { 
        var nr = Number($(this).html());
        sum += nr;
    });

    if (sum == 0)
    {
        printableTable.find("tr th:nth-child("+i+")").each(function() {
            $(this).hide();
        });

        printableTable.find("tr td:nth-child("+i+")").each(function() {
            $(this).hide();
        });
    }
}

使用：printableTable.html()代替document.getElementsByTagName('table')[0].innerHTML

工作演示：http://jsfiddle.net/er144/84tgF/

Answer 2

首先，我们必须克隆该表，并找到每个td为0的值。

var table = $("table").clone();
table.find("td").each(function(){
    if(!parseInt($(this).text())){
        $(this).remove();
    }
});

如果它的值为0，我们必须删除每个td并附加克隆表。

var data = '<table border="1" cellspacing="0"><tr><td colspan="4">Sample Report</td></tr>' + table.html() + '</table>';

这是更新的小提琴http://jsfiddle.net/4d3jj/13/