使用JavaScript隱藏表格行

Question

我對編程的經驗很少，但是被要求僅使用Javascript在客戶站點上隱藏表的一行。 我知道如何使用HTML或CSS來執行此操作，但已被告知無法在我們正在使用的第三方平台中訪問那些元素，因此必須為其創建腳本。

我在http://jsfiddle.net/zcho5zs5/輸入了html，可以使用任何幫助來隱藏整個第二行。 應該顯示的是帶有下拉菜單的“選擇付款方式”和“用保存的卡付款”。 下面的所有內容都必須隱藏。

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>&nbsp;&nbsp;</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>&nbsp;&nbsp;</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>&nbsp;&nbsp;</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:&nbsp;&nbsp;</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:&nbsp;&nbsp;</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">&nbsp;&nbsp;Save my credit card information</td>
        </tr>

                </tbody></table>
            </td>
    </tr>


        </tbody></table><br>

</div>

JavaScript的？

我已經嘗試過在此站點上找到的類似功能的一些建議，但似乎沒有任何效果。

Answer 1

以下是JavaScript代碼，用於隱藏包含“通過信用卡付款”的特定行。

它設置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>&nbsp;&nbsp;</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>&nbsp;&nbsp;</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>&nbsp;&nbsp;</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:&nbsp;&nbsp;</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:&nbsp;&nbsp;</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">&nbsp;&nbsp;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>&nbsp;&nbsp;</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>&nbsp;&nbsp;</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>&nbsp;&nbsp;</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:&nbsp;&nbsp;</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:&nbsp;&nbsp;</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">&nbsp;&nbsp;Save my credit card information</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br> </div>