Hide Table Row with Javascript
12,144
Below is javascript code to hide the specific row that contains "Pay by Credit Card".
It sets the CSS style display:none on the <tr> with the 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>Edit:
Javascript in a window.onload function will execute after the page is loaded, causing a delay before your element is hidden. CSS, on the other hand, does not need the DOM to be ready.
I see that you have added the javascript using <script> tags. You mentioned that you cannot use CSS but, if you can use <script> tags, you may be able to use <style> tags as well:
<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>
Author by
Aaron Corson
Updated on June 04, 2022Comments
-
Aaron Corson almost 2 years
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. 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.
I have the html entered at http://jsfiddle.net/zcho5zs5/ and could use any help to get the entire second row to be hidden. 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
<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?
I have tried several suggestions I have found on this site for similar functions, but nothing seems to work.
-
Aaron Corson over 9 yearsThank you! This works perfectly in the jsfiddle, but when I try to implement on the 3rd party platform, it doesn't work for some reason. Tried adding <script language="JavaScript"> and <script type="text/javascript"> + </script> but still nothing. Not sure if I am doing something wrong, or the platform is just wonky. Any suggestions?
-
showdev over 9 yearsDo you see any javascript errors in your browser console? Possible to create a jsfiddle to reproduce the problem?
-
Aaron Corson over 9 yearsUsed this below from the jsfiddle code and it worked!! Thanks for help! <script type="text/javascript">//<![CDATA[ window.onload=function(){ document.getElementById('t1_t2_c_p_rowCreditCard').style.display='none'; }//]]> </script> Only problem is it shows the row I am trying to hide for a split second when the page loads...
-
showdev over 9 years
window.onloadexecutes after page load, which may cause a delay before your element is hidden. Please see my edit, above. -
Aaron Corson over 9 yearsThank you so much @showdev!! This worked perfectly. The platform tech support told me only javascript would work, but apparently that was not the case :-( Really appreciate this!
