javascript单击父行对应的子行以显示_Javascript

javascript单击父行对应的子行以显示

javascript

javascript单击父行对应的子行以显示,javascript,Javascript,我有N个父行，在单击每个父行时对应的子行应该显示我正在onclick函数中发送父id，但如何重新设置它在功能和表现上有什么不同 <script language="javascript"> function add_rows(id) { // if (document.getElementById(id).style.display == "none") { document.getElementById(id)

我有N个父行，在单击每个父行时对应的子行

应该显示

我正在onclick函数中发送父id，但如何重新设置

它在功能和表现上有什么不同

<script language="javascript">
function add_rows(id)
{
//
if (document.getElementById(id).style.display == "none") 
                {
                document.getElementById(id).style.display = "";

                return;
            }   

}
</script>
</head>

<body>
<table width="100%" border="1" cellspacing="1" cellpadding="1">
  <tr id="parent_1">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td><input type="button" class="button_small"  onclick="add_rows(parent_1);" value="Add newrow" align="left"/></td>
  </tr>
  <tr style="display:none" id="1_row_1">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>A</td>
  </tr>
  <tr style="display:none" id="1_row_2">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>B</td>
  </tr>
  <tr style="display:none" id="1_row_3">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>C</td>
  </tr>
  <tr style="display:none" id="1_row_4">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>D</td>
  </tr>

   <tr id="parent_2">
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td><input type="button" class="button_small"  onclick="add_rows(parent_2);" value="Add newrow" align="left"/></td>
  </tr>
  <tr style="display:none" id="2_row_1">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>A</td>
  </tr>
  <tr style="display:none" id="2_row_2">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>B</td>
  </tr>
  <tr style="display:none" id="2_row_3">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>C</td>
  </tr>
  <tr style="display:none" id="2_row_4">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>D</td>
  </tr>
</table>


函数添加_行（id）
{
//
if（document.getElementById（id.style.display==“无”）
{
document.getElementById（id）.style.display=“”；
返回；
}   
}
1.
2.
3.
A.
B
C
D
4.
5.
6.
A.
B
C
D

这里小提琴：
单引号引用
id

<td><input type="button" class="button_small" onclick="add_rows('parent_1');" value="Add newrow" align="left"/></td> <td><input type="button" class="button_small" onclick="add_rows('parent_2');" value="Add newrow" align="left"/></td>

另外，在js函数中，您已经相应地给出了id…使用它们来检查它们是否是子元素
JS

function add_rows(id) { var newid = id.split("_"); //console.log(newid); id = newid[1] + "_row_" + newid[1]; for(var i = 1; i<= 4; i++){ id = newid[1] + "_row_" + i; if (document.getElementById(id).style.display == "none") { document.getElementById(id).style.display = ""; } } }

函数添加行（id） { var newid=id.split（“”）； //console.log（newid）； id=newid[1]+“_row_”+newid[1]；对于（var i=1；i我也做过类似的事情，所以我做了这个。（我建议您使用“console.log”来查看发生了什么。）函数添加_行（id）{ 控制台日志（“#1”）； var elt1=document.getElementById（id）；//一个表控制台日志（“elt1:”，elt1）； elts1=elt1.getElementsByTagName（“tr”）；控制台日志（“elts1:”，elts1，elts1.length）；对于（i=0；i 我猜你有语法错误？你缺少id字符串参数的引号我清除了语法错误，但是如何显示每个父项对应的子项？ <script type="text/javascript"> function add_rows(id) { console.log("#1"); var elt1 = document.getElementById(id); // one table console.log("elt1: ", elt1); elts1 = elt1.getElementsByTagName("tr"); console.log("elts1: ", elts1, elts1.length); for (i=0; i<elts1.length; i++) { console.log("iiii: ", elts1[i].style.display ); if (elts1[i].style.display == "none") { elts1[i].style.display = "table-row"; break; } } } </script> </head> <body> <div id="bodydiv"> <table width="100%" border="1" cellspacing="1" cellpadding="1" id="tableid1"> <tr style="display:table-row"> <td>1</td><td>2</td><td>3</td> <td><input type="button" class="button_small" onclick="add_rows('tableid1');" value="Add newrow" align="left" /></td> </tr> <tr style="display:none" id="1_row_1"> <td> </td><td> </td><td> </td><td>A</td> </tr> <tr style="display:none" id="1_row_2"> <td> </td><td> </td><td> </td><td>B</td> </tr> <tr style="display:none" id="1_row_3"> <td> </td><td> </td><td> </td><td>C</td> </tr> <tr style="display:none" id="1_row_4"> <td> </td><td> </td><td> </td><td>D</td> </tr> </table> <table width="100%" border="1" cellspacing="1" cellpadding="1" id="tableid2"> <tr> <td>4</td><td>5</td><td>6</td> <td><input type="button" class="button_small" onclick="add_rows('tableid2');" value="Add newrow" align="left"/></td> </tr> <tr style="display:none" id="2_row_1"> <td> </td><td> </td><td> </td><td>A</td> </tr> <tr style="display:none" id="2_row_2"> <td> </td><td> </td><td> </td><td>B</td> </tr> <tr style="display:none" id="2_row_3"> <td> </td><td> </td><td> </td><td>C</td> </tr> <tr style="display:none" id="2_row_4"> <td> </td><td> </td><td> </td><td>D</td> </tr> </table> </div> </body> </html>