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

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一無所知，所以它可能只是用戶錯誤。用於顯示/隱藏html表格列的單選按鈕

<!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>

來源

2015-11-17 ABeckley

請發表您的代碼。你到目前爲止嘗試過什麼？ –

不需要代碼就可以提供幫助 –

聽起來就像你可以在單選按鈕事件 – faadi

如果我正確理解你的話，下面的解決方案應該適合你。

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>

來源

2015-11-17 18:16:38 dave

上使用來自JQuery的toggle（）函數來切換show（）和hide（）javascript函數，而不是'block'使用'inline'或' inline-block「，在'hideOrShow'函數中，這兩列將並排放置，而不是一個放在另一列。 – nelek

@nelek謝謝我更新了它。這幾天我很少用桌子。 – dave

不確定你的意思：_it註釋掉該部分..._我的代碼段是否適合你？ – dave

我做，你是不是能夠在一個表格來引用列，而不需要對響應單選按鈕事件信息的假設。假設是這種情況，請繼續閱讀。

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

例如

<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將被隱藏，這意味着在第二列中的每個小區內的每個細胞。

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

來源

2015-11-17 18:31:13 Phil

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

回答

相關問題