【问题标题】:Hide Table Row with Javascript使用 Javascript 隐藏表格行
【发布时间】:2014-12-12 04:13:51
【问题描述】:

我几乎没有编程经验,但有人要求我仅使用 Javascript 隐藏客户网站上的一行表格。我知道如何使用 HTML 或 CSS 执行此操作,但被告知我无法在我们使用的第 3 方平台中访问这些元素,必须为其创建脚本。

我在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?

我已经尝试了几个我在这个网站上找到的类似功能的建议,但似乎没有任何效果。

【问题讨论】:

  • 你尝试了什么,出了什么问题?

标签: javascript html-table row hidden


【解决方案1】:

下面是隐藏包含“信用卡付款”的特定行的 javascript 代码。

它在 ID 为“t1_t2_c_p_rowCreditCard”的&lt;tr&gt; 上设置 CSS 样式 display:none。

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

编辑:

window.onload 函数中的 Javascript 将在页面加载后执行,从而在您的元素被隐藏之前造成延迟。另一方面,CSS 不需要准备好 DOM。

我看到您使用&lt;script&gt; 标签添加了javascript。您提到您不能使用 CSS,但是,如果您可以使用 &lt;script&gt; 标签,您也可以使用 &lt;style&gt; 标签:

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

【讨论】:

  • 谢谢!这在 jsfiddle 中非常有效,但是当我尝试在 3rd 方平台上实现时,由于某种原因它不起作用。尝试添加 但仍然没有。不知道我做错了什么,或者平台只是不稳定。有什么建议吗?
  • 您是否在浏览器控制台中看到任何 javascript 错误?可以创建jsfiddle 来重现问题吗?
  • 在下面的 jsfiddle 代码中使用了这个,它起作用了!!感谢帮助! 唯一的问题是当页面加载时它会显示我试图隐藏的行...
  • window.onload 在页面加载后执行,这可能会导致您的元素隐藏之前的延迟。请参阅上面的我的编辑。
  • 非常感谢@showdev!这非常有效。平台技术支持告诉我只有 javascript 可以工作,但显然情况并非如此 :-( 真的很感激!
猜你喜欢
  • 2020-03-04
  • 2013-11-16
  • 1970-01-01
  • 2015-09-03
  • 2014-09-26
  • 2017-11-05
  • 2013-03-17
  • 2021-05-09
  • 2011-11-06
相关资源
最近更新 更多