使用JavaScript隐藏表格行
[英]Hide Table Row with Javascript
问题描述
I have very little experience with programming, but have been requested to hide a row of a table on a customer site using only Javascript. 
我对编程的经验很少，但是被要求仅使用Javascript在客户站点上隐藏表的一行。 I know how to do this with both HTML or CSS, but have been told I cannot access those elements in the 3rd party platform we are using and must create a script for it. 我知道如何使用HTML或CSS来执行此操作，但已被告知无法在我们正在使用的第三方平台中访问那些元素，因此必须为其创建脚本。
I have the html entered at http://jsfiddle.net/zcho5zs5/ and could use any help to get the entire second row to be hidden. 我在http://jsfiddle.net/zcho5zs5/输入了html，可以使用任何帮助来隐藏整个第二行。 All that should be displayed is "Select Payment Method" and "Pay by Saved Card" with the dropdown. 应该显示的是带有下拉菜单的“选择付款方式”和“用保存的卡付款”。 Everything below that needs to be hidden. 下面的所有内容都必须隐藏。
HTML Code HTML代码
<div id="t1_t2_c_p_pnlPaymentMethod">
<span id="t1_t2_c_p_lblPaymentMethod" style="font-weight:bold;">Select a Payment Method:</span>
<table cellspacing="0" cellpadding="4" width="500" border="0" id="tblPaymentOptions">
<tbody><tr id="t1_t2_c_p_rowSavedCC">
<td valign="top"><input id="t1_t2_c_p_rdoSavedCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoSavedCreditCard" checked="checked"></td>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td align="right"><span id="t1_t2_c_p_lblSavedCreditCard">Pay by Saved Card:</span> </td>
<td><select name="t1:t2:c:p:ddlSavedCCList" id="t1_t2_c_p_ddlSavedCCList" onchange="$p.rdoSavedCreditCard.checked = true;">
<option selected="selected" value="o-s1J0eNVIcq4H1oad1hwvro3BLo-s0vwMUr7g-pPe7tsToQhzbVQ5W4A-e-e">P-Card 4375</option>
</select> </td>
<td><a id="t1_t2_c_p_btnDeleteSavedCC" class="LinkButton" href="javascript:__doPostBack('t1$t2$c$p$btnDeleteSavedCC','')" style="display: none;">Delete</a></td>
</tr>
</tbody></table>
</td>
</tr>
<tr id="t1_t2_c_p_rowCreditCard">
<td valign="top"><input id="t1_t2_c_p_rdoCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoCreditCard"></td>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td><span id="t1_t2_c_p_lblCreditCard">Pay by Credit Card:</span> </td>
<td><select name="t1:t2:c:p:ddlCCType" id="t1_t2_c_p_ddlCCType" onchange="$p.rdoCreditCard.checked = true;" style="width:100%;">
<option selected="selected" value="Visa">Visa</option>
</select></td>
</tr><tr>
<td>Account Number: </td>
<td><input name="t1:t2:c:p:txbCCAccount" type="text" maxlength="20" id="t1_t2_c_p_txbCCAccount" autocomplete="off" onkeypress="$p.rdoCreditCard.checked = true;" style="width:150px;"></td>
</tr>
<tr>
<td>Expiration Date: </td>
<td>
<select name="t1:t2:c:p:ddlCCExpMonth" id="t1_t2_c_p_ddlCCExpMonth">
<option selected="selected" value=""></option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="t1:t2:c:p:ddlCCExpYear" id="t1_t2_c_p_ddlCCExpYear">
<option value=""></option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
</select></td>
</tr>
<tr id="t1_t2_c_p_rowSaveCCQuestion">
<td></td>
<td><input id="t1_t2_c_p_chkSaveCC" type="checkbox" name="t1:t2:c:p:chkSaveCC"> Save my credit card information</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table><br>
</div>
Javascript? JavaScript的？
I have tried several suggestions I have found on this site for similar functions, but nothing seems to work. 我已经尝试过在此站点上找到的类似功能的一些建议，但似乎没有任何效果。
1 个解决方案
解决方案1
1 已采纳 2014-10-16 17:37:11
Below is javascript code to hide the specific row that contains "Pay by Credit Card". 以下是JavaScript代码，用于隐藏包含“通过信用卡付款”的特定行。
It sets the CSS style display:none on the <tr> with the id "t1_t2_c_p_rowCreditCard". 它设置CSS样式display:none在<tr>上没有ID为“ t1_t2_c_p_rowCreditCard”。
document.getElementById('t1_t2_c_p_rowCreditCard').style.display='none';
document.getElementById('t1_t2_c_p_rowCreditCard').style.display = 'none';
<div id="t1_t2_c_p_pnlPaymentMethod"> <span id="t1_t2_c_p_lblPaymentMethod" style="font-weight:bold;">Select a Payment Method:</span> <table cellspacing="0" cellpadding="4" width="500" border="0" id="tblPaymentOptions"> <tbody> <tr id="t1_t2_c_p_rowSavedCC"> <td valign="top"> <input id="t1_t2_c_p_rdoSavedCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoSavedCreditCard" checked="checked"> </td> <td> <table cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td align="right"><span id="t1_t2_c_p_lblSavedCreditCard">Pay by Saved Card:</span> </td> <td> <select name="t1:t2:c:p:ddlSavedCCList" id="t1_t2_c_p_ddlSavedCCList" onchange="$p.rdoSavedCreditCard.checked = true;"> <option selected="selected" value="o-s1J0eNVIcq4H1oad1hwvro3BLo-s0vwMUr7g-pPe7tsToQhzbVQ5W4A-ee">P-Card 4375</option> </select> </td> <td><a id="t1_t2_c_p_btnDeleteSavedCC" class="LinkButton" href="javascript:__doPostBack('t1$t2$c$p$btnDeleteSavedCC','')" style="display: none;">Delete</a> </td> </tr> </tbody> </table> </td> </tr> <tr id="t1_t2_c_p_rowCreditCard"> <td valign="top"> <input id="t1_t2_c_p_rdoCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoCreditCard"> </td> <td> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><span id="t1_t2_c_p_lblCreditCard">Pay by Credit Card:</span> </td> <td> <select name="t1:t2:c:p:ddlCCType" id="t1_t2_c_p_ddlCCType" onchange="$p.rdoCreditCard.checked = true;" style="width:100%;"> <option selected="selected" value="Visa">Visa</option> </select> </td> </tr> <tr> <td>Account Number: </td> <td> <input name="t1:t2:c:p:txbCCAccount" type="text" maxlength="20" id="t1_t2_c_p_txbCCAccount" autocomplete="off" onkeypress="$p.rdoCreditCard.checked = true;" style="width:150px;"> </td> </tr> <tr> <td>Expiration Date: </td> <td> <select name="t1:t2:c:p:ddlCCExpMonth" id="t1_t2_c_p_ddlCCExpMonth"> <option selected="selected" value=""></option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> <select name="t1:t2:c:p:ddlCCExpYear" id="t1_t2_c_p_ddlCCExpYear"> <option value=""></option> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> <option value="2028">2028</option> <option value="2029">2029</option> </select> </td> </tr> <tr id="t1_t2_c_p_rowSaveCCQuestion"> <td></td> <td> <input id="t1_t2_c_p_chkSaveCC" type="checkbox" name="t1:t2:c:p:chkSaveCC"> Save my credit card information</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br> </div>
Edit: 编辑：
Javascript in a window.onload function will execute after the page is loaded, causing a delay before your element is hidden. window.onload函数中的Javascript将在页面加载后执行，这会导致元素隐藏之前的延迟。 CSS, on the other hand, does not need the DOM to be ready. 另一方面，CSS不需要DOM。
I see that you have added the javascript using <script> tags. 我看到您已经使用<script>标签添加了javascript。 You mentioned that you cannot use CSS but, if you can use <script> tags, you may be able to use <style> tags as well: 您提到不能使用CSS，但是，如果可以使用<script>标记，则也可以使用<style>标记：
<style type="text/css">
tr#t1_t2_c_p_rowCreditCard {display:none;}
</style>
<style type="text/css"> tr#t1_t2_c_p_rowCreditCard { display:none; } </style> <div id="t1_t2_c_p_pnlPaymentMethod"> <span id="t1_t2_c_p_lblPaymentMethod" style="font-weight:bold;">Select a Payment Method:</span> <table cellspacing="0" cellpadding="4" width="500" border="0" id="tblPaymentOptions"> <tbody> <tr id="t1_t2_c_p_rowSavedCC"> <td valign="top"> <input id="t1_t2_c_p_rdoSavedCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoSavedCreditCard" checked="checked"> </td> <td> <table cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td align="right"><span id="t1_t2_c_p_lblSavedCreditCard">Pay by Saved Card:</span> </td> <td> <select name="t1:t2:c:p:ddlSavedCCList" id="t1_t2_c_p_ddlSavedCCList" onchange="$p.rdoSavedCreditCard.checked = true;"> <option selected="selected" value="o-s1J0eNVIcq4H1oad1hwvro3BLo-s0vwMUr7g-pPe7tsToQhzbVQ5W4A-ee">P-Card 4375</option> </select> </td> <td><a id="t1_t2_c_p_btnDeleteSavedCC" class="LinkButton" href="javascript:__doPostBack('t1$t2$c$p$btnDeleteSavedCC','')" style="display: none;">Delete</a> </td> </tr> </tbody> </table> </td> </tr> <tr id="t1_t2_c_p_rowCreditCard"> <td valign="top"> <input id="t1_t2_c_p_rdoCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoCreditCard"> </td> <td> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><span id="t1_t2_c_p_lblCreditCard">Pay by Credit Card:</span> </td> <td> <select name="t1:t2:c:p:ddlCCType" id="t1_t2_c_p_ddlCCType" onchange="$p.rdoCreditCard.checked = true;" style="width:100%;"> <option selected="selected" value="Visa">Visa</option> </select> </td> </tr> <tr> <td>Account Number: </td> <td> <input name="t1:t2:c:p:txbCCAccount" type="text" maxlength="20" id="t1_t2_c_p_txbCCAccount" autocomplete="off" onkeypress="$p.rdoCreditCard.checked = true;" style="width:150px;"> </td> </tr> <tr> <td>Expiration Date: </td> <td> <select name="t1:t2:c:p:ddlCCExpMonth" id="t1_t2_c_p_ddlCCExpMonth"> <option selected="selected" value=""></option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> <select name="t1:t2:c:p:ddlCCExpYear" id="t1_t2_c_p_ddlCCExpYear"> <option value=""></option> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> <option value="2028">2028</option> <option value="2029">2029</option> </select> </td> </tr> <tr id="t1_t2_c_p_rowSaveCCQuestion"> <td></td> <td> <input id="t1_t2_c_p_chkSaveCC" type="checkbox" name="t1:t2:c:p:chkSaveCC"> Save my credit card information</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
javascript隐藏表本地存储中的行 - javascript hide row in table local storage
使用Javascript将按钮隐藏在表格的最后一行 - Hide the button in the last row of the table using Javascript
使用 javascript 隐藏表中的 Class 行 - Hide Class Row in table using javascript
基于表格单元格纯Javascript隐藏表格行 - Hide table row based on table cell pure Javascript
使用javascript隐藏表格中的表格行元素 - Hide a table row element inside a table using javascript
javascript/jquery - 如果选中单选按钮，则隐藏/显示表格行 - javascript/jquery - hide/show table row if radio buttons checked
隐藏表格行 - Hide a table row
隐藏表格中的特定行？ - Hide a specific row in table?
按下拉菜单隐藏表格 - Hide table row by dropdown
如果没有行，则隐藏表格标题 - Hide table header if there is no row
相关标签