如何使用纯 Javascript 选择表格的一部分答案

【问题标题】：How to select a portion of a table with plain Javascript如何使用纯 Javascript 选择表格的一部分
【发布时间】：2012-10-31 17:12:49
【问题描述】：

我为此使用 jQuery，但我现在不能使用它（没有理由这样做）。我需要选择表格的一部分，然后打印出来。

我使用这个代码：

function Printon(this)
{
    newWin= window.open('','','toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=800, height=1000, left=10, top=25');
    newWin.document.write('<table>' + document.getElementsByName(this).innerHTML + '</table>');
    newWin.document.close();
    newWin.focus();
    newWin.print();
    newWin.close();
    return false;
}

然后使用<tr> 名称的参数调用函数时，我只得到一个文档：

12-11-12

undefined

我确定我的 HTML 是正确的，但仍然是我的 HTML：

<tr name="Print_1">
    <td>dhr Kees-jan ckc Von fleppenstein</td>
    <td>aquaduct straat 66<br>0606 OP ORK</td>
    <td>WDB-1352303696</td>
    <td>2822.00</td>
    <td><input type="button" value="Print this" onclick="Printon('Print_1')"></td>
    <td> &nbsp;</td>
</tr>
<tr name="Print_1">
    <td>-</td>
    <td> &nbsp;</td>
    <td> &nbsp;</td>
    <td>46.00</td>
    <td>2</td>
    <td>Actiesalade herfst</td>
</tr>
<tr name="Print_1">
    <td>-</td>
    <td> &nbsp;</td>
    <td> &nbsp;</td>
    <td>46.00</td>
    <td>2</td>
    <td>Actiesalade herfst</td>
</tr>

在@Muthu Kumaran 的启发下，我使用了这个：

function Printon(dit)
{
    var arr = new Array(); 
    arr = document.getElementsByName(dit); 
    var tabel = '';
    for(var i = 0; i < arr.length; i++){
         tabel += document.getElementsByName(dit)[i].outerHTML;
    }

    newWin= window.open('','','toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=800, height=1000, left=10, top=25');
    newWin.document.write('<table border=\"2\" cellpadding=\"2\" cellspacing=\"0\">' + tabel + '</table>');
    newWin.document.close();
    newWin.focus();
    newWin.print();
    newWin.close();
    return false;
}

修复它现在可以工作了！

【问题讨论】：

标签： javascript html html-table css-selectors

【解决方案1】：

不要在函数中使用this 作为参数。给出一个适当的变量，如名称。 document.getElementsByName 也将返回元素数组，因此您必须使用 document.getElementsByName(name)[0] 获取值

试试这个，

function Printon(name)
{
    newWin= window.open('','','toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=800, height=1000, left=10, top=25');
    newWin.document.write('<table>' + document.getElementsByName(name)[0].innerHTML + '</table>');
    newWin.document.close();
    newWin.focus();
    newWin.print();
    newWin.close();
    return false;
}

工作演示： http://jsfiddle.net/muthkum/RxNKn/1/

【讨论】：

啊哈，有道理。调用命名对象时，我需要遍历所有对象，因为它们像数组一样排列。我认为使用 getElementsByName(name) 会选择所有元素，但我错了。现在开始循环！

【解决方案2】：

您正在传递一个字符串“Print_1”，并且在您正在使用它的函数中。 “this”将不包含“Print_1”。

最好使用变量而不是这个。将您的函数更改为如下所示。

function Printon(var tableName)
                {
                    newWin= window.open('','','toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=800, height=1000, left=10, top=25');
                    newWin.document.write('<table>' + document.getElementsByName(tableName).innerHTML + '</table>');
                    newWin.document.close();
                    newWin.focus();
                    newWin.print();
                    newWin.close();
                    return false;
                }

希望对你有帮助！！！

【讨论】：