顯示/隱藏html表格列的單選按鈕

Question

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

我找到了隱藏列組的代碼，但是列旁邊的單選按鈕仍然顯示。 我正在嘗試折疊這些列以及其中的所有內容。 我正在自學CSS，但我對JavaScript一無所知，因此可能只是用戶錯誤。

<!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> &emsp;&emsp;
          <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>

Answer 1

如果我對您的理解正確，那么以下解決方案應該適合您。

 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>

Answer 2

我假設您不能引用表中的列，而不需要有關響應單選按鈕事件的信息。 假設是這種情況，請繼續閱讀。

向每個表元素添加一個類，以便您可以標識哪些元素屬於哪些行。 然后基於單選按鈕事件，運行一個函數以隱藏具有適當類名的所有元素。

例如

<tr>
  <td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
<tr>
  <td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>

現在，您可以使用jQuery做類似的事情：

$('.col2').hide();

每個具有col2類的單元格將被隱藏，這意味着第二列中的每個單元格。

如果您尚不知道，則應該能夠找到適當的代碼來響應Web上的單選按鈕更改事件。

顯示/隱藏html表格列的單選按鈕

問題描述

2 個解決方案

解決方案1
3 2015-11-17 18:16:38

解決方案2
0 2015-11-17 18:31:13

顯示/隱藏html表格列的單選按鈕

問題描述

2 個解決方案

解決方案1 3 2015-11-17 18:16:38

解決方案2 0 2015-11-17 18:31:13

解決方案1
3 2015-11-17 18:16:38

解決方案2
0 2015-11-17 18:31:13