单选按钮来显示/隐藏html表格列 [英] Radio buttons to show/hide html table columns
本文介绍了单选按钮来显示/隐藏html表格列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个4列的表单。
第1列是问题列表，第2-4列是是/否单选按钮。
当表格第一次显示时，只显示第一列。用户将选择一个单选按钮来额外显示第2列和第3列或第4列
我已找到代码隐藏列组，但列中的单选按钮仍显示。我正试图折叠它们的列和其中的所有内容。
<！DOCTYPE html>我自学CSS，我对JavaScript一无所知，所以它可能只是用户错误。
<！ - cg2.Style.visibility =hidden
cg3.Style.visibility =hidden
cg4.Style.visibility =hidden - >
< / script>
< / head>
< body onload =vbscript：Startup window.dialogarguments>
< form name =baseformid =baseformaction =method =post>
< div id =showhide>
< label>< input type =radioname =T_097_WDid =T_097lftvalue =L1M/>此按钮显示第2& 3
< / label> &安培; EMSP;&安培; EMSP;
< label>< input type =radioname =T_097_WDid =T_097slvvalue =SLV/>此按钮显示第4列
< / label>
< / div>
< table border =1style =width：50％>
< COLGROUP id = cg1>< / COLGROUP>
< COLGROUP id = cg2>< / COLGROUP>
< COLGROUP id = cg3>< / COLGROUP>
< COLGROUP id = cg4>< / COLGROUP>
< tr>
< td>永远不要隐藏此栏位< / td>
< td>栏在启动时收起< / td>
< td>栏在启动时收起< / td>
< td>栏在启动时收起< / td>
< / tr>
< tr>
< td> Q2< / td>
< td>< input type =radioname =T_100_hiid =T_100value =1/>是
< input type =radioname = T_100_hiid =T_100value =0/>< / td>
< td>< input type =radioname =T_100_hiid =T_100value =1/>是
< input type =radioname = T_100_hiid =T_100value =0/>< / td>
< td>< input type =radioname =T_100_hiid =T_100value =1/>是
< input type =radioname = T_100_hiid =T_100value =0/>< / td>
< / tr>
< tr>
< td> Q3< / td>
< td>< input type =radioname =T_100_hiid =T_100value =1/>是
< input type =radioname = T_100_hiid =T_100value =0/>< / td>
< td>< input type =radioname =T_100_hiid =T_100value =1/>是
< input type =radioname = T_100_hiid =T_100value =0/>< / td>
< td>< input type =radioname =T_100_hiid =T_100value =1/>是
< input type =radioname = T_100_hiid =T_100value =0/>< / td>
< / tr>
< tr>
< td> Q4< / td>
< td>< input type =radioname =T_100_hiid =T_100value =1/>是
< input type =radioname = T_100_hiid =T_100value =0/>< / td>
< td>< input type =radioname =T_100_hiid =T_100value =1/>是
< input type =radioname = T_100_hiid =T_100value =0/>< / td>
< td>< input type =radioname =T_100_hiid =T_100value =1/>是
< input type =radioname = T_100_hiid =T_100value =0/>< / td>
< / tr>
< tr>
< td> Q5< / td>
< td>< input type =radioname =T_100_hiid =T_100value =1/>是
< input type =radioname = T_100_hiid =T_100value =0/>< / td>
< td>< input type =radioname =T_100_hiid =T_100value =1/>是
< input type =radioname = T_100_hiid =T_100value =0/>< / td>
< td>< input type =radioname =T_100_hiid =T_100value =1/>是
< input type =radioname = T_100_hiid =T_100value =0/>< / td>
< / tr>
< / table>
解决方案
为您。
var selection = document.getElementById（selection）; selection.addEventListener（change，function（e）{if （e.target.tagName ===INPUT&& e.target.type ===radio）{//获得电台值var value = document.querySelector（'input [type =radio] ：checked'）。value; //通过列获取项目var one = document.querySelectorAll（td：nth-child（1））; var twothree = document.querySelectorAll（td：nth-child（2），td ：nth-child（3））; var four = document.querySelectorAll（td：nth-child（4））; //隐藏所有列hideOrShow（one，false）; hideOrShow（twothree，false）; hideOrShow四，假）; //显示选定的列开关（值）{情况一： hideOrShow（one，true）;打破; casetwothree：hideOrShow（twothree，true）;打破; casefour：hideOrShow（four，true）;打破; }}}）; function hideOrShow（nodes，show）{[] .forEach.call（nodes，function（item）{item.style.display = show？inline-block：none;}）;} / / force change event to set state change changeEvent = new Event（change，{bubbles：true}）; document.querySelector（'input [type =radio] [value =one]'）。dispatchEvent（ changeEvent）;
< div id =selection> ; <标签>首先< input type =radioname =shownvalue =onechecked /> < /标签> <标签> Two&Three< input type =radioname =shownvalue =twothree/> < /标签> <标签> Four< input type =radioname =shownvalue =four/> < / label>< / div>< table border =1> < TR> < TD - 酮< / TD> < TD>二< / TD> < TD>三< / TD> < TD>四< / TD> < / TR> < TR> < TD - 酮< / TD> < TD>二< / TD> < TD>三< / TD> < TD>四< / TD> < / TR> < TR> < TD - 酮< / TD> < TD>二< / TD> < TD>三< / TD> < TD>四< / TD> < / table>
I have a form with 4 columns.
Column 1 is a list of questions and columns 2-4 are yes/no radio buttons.
When the form first displays only column 1 should show. User would select a radio button to additionally display either columns 2&3 or column 4
I have found code that hides the column groups, but the radio buttons in side the column still display. I am trying to collapse the columns and everything inside of them too. I am teaching myself CSS and I know nothing about javascript so it could just be user error.
<!DOCTYPE html>
<!-- cg2.Style.visibility="hidden"
cg3.Style.visibility="hidden"
cg4.Style.visibility="hidden"-->
</script>
</head>
<body onload="vbscript:Startup window.dialogarguments">
<form name="baseform" id="baseform" action="" method="post">
<div id="showhide">
<label><input type="radio" name="T_097_WD" id="T_097lft" value="L1M" />this button Shows columns 2 & 3
</label>   
<label><input type="radio" name="T_097_WD" id="T_097slv" value="SLV" />this button Shows column 4
</label>
</div>
<table border="1" style="width:50%" >
<COLGROUP id=cg1></COLGROUP>
<COLGROUP id=cg2></COLGROUP>
<COLGROUP id=cg3></COLGROUP>
<COLGROUP id=cg4></COLGROUP>
<tr>
<td>Never hide this column</td>
<td>column collapsed on startup</td>
<td>column collapsed on startup</td>
<td>column collapsed on startup</td>
</tr>
<tr>
<td>Q2</td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
</tr>
<tr>
<td>Q3</td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
</tr>
<tr>
<td>Q4</td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
</tr>
<tr>
<td>Q5</td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
</tr>
</table>
解决方案
If I understand you correctly, the following solution should work for you.
var selection = document.getElementById("selection");
selection.addEventListener("change", function(e) {
if (e.target.tagName === "INPUT" && e.target.type === "radio") {
//get radio value
var value = document.querySelector('input[type="radio"]:checked').value;
//get items by column
var one = document.querySelectorAll("td:nth-child(1)");
var twothree = document.querySelectorAll("td:nth-child(2),td:nth-child(3)");
var four = document.querySelectorAll("td:nth-child(4)");
//hide all columns
hideOrShow(one, false);
hideOrShow(twothree, false);
hideOrShow(four, false);
//show selected columns
switch (value) {
case "one":
hideOrShow(one, true);
break;
case "twothree":
hideOrShow(twothree, true);
break;
case "four":
hideOrShow(four, true);
break;
}
}
});
function hideOrShow(nodes, show) {
[].forEach.call(nodes, function(item) {
item.style.display = show ? "inline-block" : "none";
});
}
//force change event to set to initial state
var changeEvent = new Event("change", {bubbles: true});
document.querySelector('input[type="radio"][value="one"]').dispatchEvent(changeEvent);
<div id="selection">
<label>
First
<input type="radio" name="shown" value="one" checked />
</label>
<label>
Two and Three
<input type="radio" name="shown" value="twothree" />
</label>
<label>
Four
<input type="radio" name="shown" value="four" />
</label>
</div>
<table border="1">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
</table>
这篇关于单选按钮来显示/隐藏html表格列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
