我对编程的经验很少,但已被要求仅使用Javascript在客户站点上隐藏一行表。我知道如何使用HTML或CSS执行此操作,但已被告知我无法访问我们正在使用的第三方平台中的这些元素,并且必须为其创建脚本。
我在http://jsfiddle.net/zcho5zs5/输入了html,可以使用任何帮助来隐藏整个第二行。所有应该显示的是"选择付款方式"和#34;通过已存卡支付"随着下拉菜单。下面的所有内容都需要隐藏。
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?
我已尝试过在本网站上发现的类似功能的一些建议,但似乎没有任何效果。
答案 0 :(得分:1)
下面是javascript代码,用于隐藏包含“通过信用卡付款”的特定行。
它在display:none
上设置CSS样式<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-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>
window.onload
函数中的Javascript将在页面加载后执行,导致元素被隐藏之前出现延迟。另一方面,CSS不需要DOM就绪。
我看到您使用<script>
标记添加了javascript。您提到您不能使用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-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>