Question

所以这就是场景。

我从XML文件导入了一组数据，以监控打印机的状态并将其格式化为表格。

现在，我想制作一系列按钮（或复选框），单击这些按钮可隐藏相应的表格行。我尝试了几种方法，但没有一种方法可以工作。

这是代码。

<html>
<head>
<meta http-equiv="refresh" content="60">
<style>
table, th, td {
border: 1px solid black;
border-collapse:collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<script>
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","runningprinters.xml", false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table><tr><th>Printer</th><th>Status</th></tr>");
var x=xmlDoc.getElementsByTagName("printer");
for (i=0;i<x.length;i++)
{ 
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("status")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");


</script>
<input type = "checkbox" id = "check1">1104 Down<br/>
<input type = "checkbox" id = "check2">2102 Down<br/>
<input type = "checkbox" id = "check3">2103 Down<br/>
<input type = "checkbox" id = "check4">2112 Down<br/>
<input type = "checkbox" id = "check5">2120 Down<br/>
</body>
</html>

因此复选框应隐藏表中的相应行。被困在它上面几天了。

任何帮助都将不胜感激。

Answer 1

以下是如何使用javascript从表中删除行的一个很好的示例。

Delete Row From a Table

Answer 2

我创建了一个类似

的XML示例

<printers>
<printer>
    <name>1104</name>
    <status>online</status>
</printer>

<printer>
    <name>2102</name>
    <status>online</status>
</printer>

<printer>
    <name>2103</name>
    <status>online</status>
</printer>

<printer>
    <name>2112</name>
    <status>online</status>
</printer>

<printer>
    <name>2120</name>
    <status>online</status>
</printer>
</printers>

我改变了你的代码，将打印机的名称指定为行的id。使用jquery我隐藏相应复选框的行。这是我的例子

<html>

<head>
    <meta http-equiv="refresh" content="60">
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        
        th,
        td {
            padding: 5px;
        }
    </style>
</head>

<body>
    <script>
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "runningprinters.xml", false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;

        document.write("<table><tr><th>Printer</th><th>Status</th></tr>");
        var x = xmlDoc.getElementsByTagName("printer");
        for (i = 0; i < x.length; i++) {
            var printerName=x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
            document.write("<tr id='" + printerName + "'><td>");
            document.write(printerName);
            document.write("</td><td>");
            document.write(x[i].getElementsByTagName("status")[0].childNodes[0].nodeValue);
            document.write("</td></tr>");
        }
        document.write("</table>");
        
        function removeRow(id) {
            $('#' + id).hide();
        }
    </script>
    <input type="checkbox" id="check1" onclick="removeRow(1104)">1104 Down
    <br/>
    <input type="checkbox" id="check2" onclick="removeRow(2102)">2102 Down
    <br/>
    <input type="checkbox" id="check3" onclick="removeRow(2103)">2103 Down
    <br/>
    <input type="checkbox" id="check4" onclick="removeRow(2112)">2112 Down
    <br/>
    <input type="checkbox" id="check5" onclick="removeRow(2120)">2120 Down
    <br/>
</body>

</html>

Answer 3

如果您只想隐藏特定的行，可以在每行添加一个处理此行的附加单元格： <td onclick="this.parentElement.style.display = 'none';" style="width: 20px; background-color:red; text-align: center; cursor: default;">X</td>

所以你有一个＆＃34;关闭＆＃34;每行按钮，比在页面某处有每个条目的复选框更容易使用。

只需将document.write("</td></tr>");中的for替换为：

即可

document.write("</td><td onclick=\"parentElement.style.display = 'none';\" style=\"width: 20px; background-color:red; text-align: center; cursor: default;\">X</td></tr>");

Answer 4

*************************第3版后******************* ******

1）我添加了一个onclick函数，它将HTML元素对象传递给函数。

2）我按元素ID获取表格。

3）使用x.parentNode我得到它的父元素是＆gt; tr＆lt;。

4）使用x.parentNode.rowIndex，我得到这个表的行号。

5）通过使用deleteRow函数，我删除了带有x.parentNode.rowIndex编号的行。

如果这确实有帮助，请告诉我......

＆＃13;

function myFun(x) {
    document.getElementById("myTable").deleteRow(x.parentNode.rowIndex);

}

＆＃13;

<table id="myTable">
  
  <tr>
    <td onclick="myFun(this)"><input type="checkbox"></td>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td onclick="myFun(this)"><input type="checkbox"></td>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
  <tr>
    <td onclick="myFun(this)"><input type="checkbox"></td>
    <td>cell 5</td>
    <td>cell 6</td>
  </tr>
  <tr>
    <td onclick="myFun(this)"><input type="checkbox"></td>
    <td>cell 7</td>
    <td>cell 8</td>
  <tr>
    <td onclick="myFun(this)"><input type="checkbox"></td>
    <td>cell 9</td>
    <td>cell 10</td>
  </tr>
  <tr>
    <td onclick="myFun(this)"><input type="checkbox"></td>
    <td>cell 11</td>
    <td>cell 12</td>
</table>

＆＃13;

隐藏表行

4 个答案: