We Keep Coding

How do I unhide a row after it is hidden?

The following code hides the first row of the table but it doesn't make the first row visible again when the checkbox is clicked again. Can someone help?
I even tried looping through the tables and toggling the row visibility but that is very slow due to the amount of tables in the html.
Alternate suggestions are welcome. This would be too painful to do in C#.
$(document).ready(function() {
$('#chkNA,#chkSC,#chkNS,#chkIss,#chkIP').click(function() {
var row;
if (this.id == 'chkNS') {
row = $('.TF-StatusNotStarted').closest('tr');
}
if (this.id == 'chkSC') {
row = $('.TF-StatusCompleted').closest('tr');
}
if (this.id == 'chkNA') {
row = $('.TF-StatusNA').closest('tr');
}
if (this.id == 'chkIss') {
row = $('.TF-StatusIssue').closest('tr');
}
if (this.id == 'chkIP') {
row = $('.TF-StatusInProgress').closest('tr');
}
var tabletest = row.parent().parent();
row.toggle();
if (tabletest.find('tbody > tr:gt(0):visible').length > 0) {
if (tabletest.find('tbody > tr:first').is(":visible") == false) {
tabletest.find('tbody > tr:first').show();
}
}
if (tabletest.find('tbody > tr:gt(0):visible').length > 0 && tabletest.find('tbody > tr:first').is(':visible')) {
tabletest.find('tbody > tr:first').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="chkNA" type="checkbox" checked="checked"> N/A <input id="chkSC" type="checkbox" checked="checked"> Completed <input id="chkNS" type="checkbox" checked="checked"> Not Started <input id="chkIss" type="checkbox" checked="checked"> Issue
<input
id="chkIP" type="checkbox" checked="checked"> In Progress
<table class="taskform">
<tr>
<td>
<table class="TF-TaskGroupTable" id="first table" border="1">
<tbody>
<tr>
<th colspan=3>
First Table
</th>
</tr>
<tr>
<td>
<select class="TF-StatusCompleted">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option selected="selected" value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option value="N/A">N/A</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="TF-StatusCompleted">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option selected="selected" value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option value="N/A">N/A</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="TF-StatusCompleted">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option selected="selected" value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option value="N/A">N/A</option>
</select>
</td>
</tr>
</tbody>
</table>
<div>
<input type="button" />
</div>
<table class="TF-TaskGroupTable" id="Second Table" border="1">
<tbody>
<tr>
<th colspan=3>
Second Table
</th>
</tr>
<tr>
<td>
<select class="TF-StatusNA">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option selected="selected" value="N/A">N/A</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="TF-StatusCompleted">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option selected="selected" value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option value="N/A">N/A</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="TF-StatusNA">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option selected="selected" value="N/A">N/A</option>
</select>
</td>
</tr>
</tbody>
</table>
<div>
<input type="button" />
</div>
<table class="TF-TaskGroupTable" id="Third Table" border="1">
<tbody>
<tr>
<th colspan=3>
Third Table
</th>
</tr>
<tr>
<td>
<select class="TF-StatusNA">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option selected="selected" value="N/A">N/A</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="TF-StatusNA">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option selected="selected" value="N/A">N/A</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="TF-StatusNA">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option selected="selected" value="N/A">N/A</option>
</select>
</td>
</tr>
</tbody>
</table>
<div>
<input type="button" />
</div>
</td>
</tr>
</table>

Update 2
Updated the scenario to target the header row instead of the rows.
Update 1
I have updated the code snippet with relevant details to help you come to a proper solution for you scenario.
Added select with same options
Select the Option with same value as the input being checked,
If the checkbox is checked it will show the valid rows, otherwise it hides them
Intial Answer
From your code it is apparent you are using jQuery to show/hide the rows. jQuery has 3 functions that perform this behavior. The obvious ones show() and hide(), and the less obvious toggle(). If your intent is to 'toggle' the visibility of an element, you should be using toggle() otherwise you have to track the state of the element yourself.
Here are some reference material for these methods to help you out.
show()
hide()
toggle()
Here is a simple example to help you out.
$(function() {
function showSelected() {
var selected = [];
$('input:checked')
.map(function(idx, elm) {
selected.push($(elm).val());
});
$('#report').text(JSON.stringify(selected));
}
$('input').click(function(event) {
// update the selected report
showSelected();
// get the value of this element
var value = $(this).val();
// options that have this value and are checked
var selector = `option[value="${value}"]:checked`;
if ($(this).is(':checked')) {
$(selector).closest('table').find('thead tr').show()
} else {
$(selector).closest('table').find('thead tr').hide()
}
});
showSelected();
$('input').click();
});
tbody td {
width: 150px
}
tbody tr.even {
background-color: cyan;
}
tbody tr.odd {
background-color: lime;
}
#report {
width: 80%;
padding: 4px;
background-color: lightgray;
border: 1px solid black;
min-height: 2rem;
}
thead tr {
background-color: cornflowerblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="Not Started"> Not Started
<input type="checkbox" value="In Progress"> In Progress
<table>
<tbody>
<tr class="odd">
<td>R1 C1</td>
<td>R1 C2</td>
<td>R1 C3</td>
<td>
<select>
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option value="N/A">N/A</option>
</select>
</td>
</tr>
<tr class="even">
<td>R2 C1</td>
<td>R2 C2</td>
<td>R2 C3</td>
<td>
<select>
<option value="Not Started">Not Started</option>
<option value="In Progress" selected>In Progress</option>
<option value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option value="N/A">N/A</option>
</select>
</td>
</tr>
<tr class="odd">
<td>R3 C1</td>
<td>R3 C2</td>
<td>R3 C3</td>
<td>
<select>
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option value="N/A">N/A</option>
</select>
</td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4">
This is a table header row
</td>
</tr>
</thead>
</table>
<pre id="report">
</pre>

two select options - validate and hide option not needed

I'm trying to show a set of select option base on what is selected on another select option. I have some issue to understand the logic with the js script.
Example:
Any advice how to hide the other options which are not used
if TV show only value device, tsignal, blackscreen, other
If Radio show only the value: device, rsignal, other
$('#new').find('option').not('[value="device"]').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form>
<table>
<tbody>
<tr>
<td>Issue:</td>
<td>
<select required id="test" name="test">
<option value="" disabled selected>Choose an option</option>
<option value="tv">tv</option>
<option value="radio">radio</option>
</select>
</td>
</tr>
<tr>
<td height="50px" colspan="3"></td>
</tr>
<tr>
<td>What is the problem?</td>
<td>
<select id="new" name="new">
<option value="" disabled selected>Select an option</option>
<option value="device">device is defect</option>
<option value="rsignal">radio has no signal</option>
<option value="tsignal">radio has no signal</option>
<option value="blackscreen">tv blackscreen</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" class="submit" value="submit"></td>
</tr>
</tbody>
</table>
</form>

I guess that you meant to use .change so when #test dropdown changed you check what its value and based on that show / hide options, right?
$('#test').change(function() {
const options = $('#new').find('option').show();
if ($(this).val() === 'tv') {
options.not('[value="device"]').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form>
<table>
<tbody>
<tr>
<td>Issue:</td>
<td>
<select required id="test" name="test">
<option value="" disabled selected>Choose an option</option>
<option value="tv">tv</option>
<option value="radio">radio</option>
</select>
</td>
</tr>
<tr>
<td height="50px" colspan="3"></td>
</tr>
<tr>
<td>What is the problem?</td>
<td>
<select id="new" name="new">
<option value="" disabled selected>Select an option</option>
<option value="device">device is defect</option>
<option value="rsignal">radio has no signal</option>
<option value="tsignal">radio has no signal</option>
<option value="blackscreen">tv blackscreen</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" class="submit" value="submit"></td>
</tr>
</tbody>
</table>
</form>
Notice Hide option is not cross browser

Highlighting the matching html cell with select box

I'd like to highlight the html cell with the matching value with the selectbox at the top. At the moment it only highlights the row. Can I get a little help, please?
What I try to do here is when a number is selected from selectbox, the corresponding cell with the matching value to be highlighted. I'd like to highlight more than one cell at the same time. Notice that they are two different tables.
This is my jsfiddle.
Here is the html code:
<div id="wrapper">
<table class="table1">
<tr>
<td><select name="list1" id="list1">
<option value="">List</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><select name="list2" id="list2">
<option value="">List</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
</td>
<td><select name="list3" id="list3">
<option value="">List</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</td>
</tr>
</table>
<table class="table2">
<tr class="row">
<td value="1"> 1 </td>
<td value="11">11</td>
<td value="21">21 </td>
</tr>
<tr class="row">
<td value="2"> 2 </td>
<td value="12">12 </td>
<td value="22">22 </td>
</tr>
<tr class="row">
<td value="3"> 3 </td>
<td value="13">13 </td>
<td value="23">23 </td>
</tr>
</table>
</div>
Css code:
.table1,td {
border:1px solid #999;
}
.table1 td {
width:150px;
}
.table2,td {
border:1px solid #999;
}
.table2 td {
width:150px;
}
Jquery code:
$("#list1").change(function () {
var index = this.value - 1;
var $rows = $('.row', '.table2');
$rows.css('background-color', '');
$('.row', '.table2').eq(index).css('background-color', 'yellow');
});

You could achieve this by using the .each() method to iterate over all cells, testing for value matches on each cell base on the currect <select /> value. Something along the lines of this might work for you:
// Apply to all selectors
$("select").change(function () {
// Extract the index of the select being interacted with
var selectIndex = $(this).parent().index();
var value = $(this).val();
// Iterate each cell of the table
$('td', '.table2').each(function() {
// If the cell index matches the index of the corresponding
// selected drop down then update it's background color
if($(this).index() === selectIndex) {
// If a value match is found, apply background color. Other
// wise clear the background color
if($(this).attr('value') == value) {
$(this).css('background-color', 'yellow');
}
else {
$(this).css('background-color', '');
}
}
})
});
.table1,td {
border:1px solid #999;
}
.table1 td {
width:150px;
}
.table2,td {
border:1px solid #999;
}
.table2 td {
width:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>
<div id="wrapper">
<table class="table1">
<tr>
<td>
<select name="list1" id="list1">
<option value="">List</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>
<select name="list2" id="list2">
<option value="">List</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
</td>
<td>
<select name="list3" id="list3">
<option value="">List</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</td>
</tr>
</table>
<table class="table2">
<tr class="row">
<td value="1"> 1 </td>
<td value="11">11</td>
<td value="21">21 </td>
</tr>
<tr class="row">
<td value="2"> 2 </td>
<td value="12">12 </td>
<td value="22">22 </td>
</tr>
<tr class="row">
<td value="3"> 3 </td>
<td value="13">13 </td>
<td value="23">23 </td>
</tr>
</table>
</div>
Hope this helps! (here's a jsfiddle as well)

Binding duplicate events by using clone()

i already duplicate my html elements by this javascript code but i cannot copy the events of the code.Will you gyups please prove me the possible solution.
<script type = "text/javascript" language = "javascript">
function func_addmore(){
$(document).ready(function() {
$("div").click(function () {
$(this).clone().insertAfter(this);
});
});
}
</script>
<body id="show" onload="func_load()">
<form method="POST" action="get_value.php" >
<table class="table table-condensed">
<tr>
<td width="1%"><span> Level of Education:</span></td>
<td >
<select id="title" name="title" >
<option value="none" selected >----Select ----</option>
<option id="1">Masters</option>
<option id="2">Bachelors</option>
<option id="3">HSC</option>
<option id="4">SSC</option>
</select>
</td>
</tr>
<tr>
<td ><span>Exam/Degee Title:</span></td>
<td ><input name="degreetitle" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<tr>
<td><span>Concentration/Major:</span></td>
<td><input name="major" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<td><span>Institutions:</span></td>
<td>
<select id="institutions" name="institutions" onchange="func_ins()">
<option value="none" selected >----Select ----</option>
<option id="1">A</option>
<option id="2">Others</option>
</select>
</td>
</tr>
<tr id ="trins">
<td><span>Others</span></td>
<td><input type="text" id="others_ins" /></td>
</tr>
<tr>
<td><span>Result:</span></td>
<td>
<select id="result" name="result" onchange="func_res()">
<option value="none" selected >----Select ----</option>
<option id="1">Grade</option>
<option id="2" >Division</option>
</select>
</td>
</tr>
<tr id ="trgrade">
<td><span>Grade</span>
<td><input type="text" id="others_grade" size="5" /></td>
</tr>
<tr id ="trscale">
<td><span>Scale:</span>
<td><input type="text" id="others_grade" size="5" /></td>
</tr>
<tr id="trdiv" onload="func_hid()" >
<td><span>Division:</span></td>
<td>
<select id="division" name="division">
<option value="none" selected >----Select ----</option>
<option id="1">1st Division</option>
<option id="2">2nd Division</option>
</select>
</td>
</tr>
<tr>
<td width="1%"><span> Year of Passing:</span></td>
<td >
<select id="title" name="title" >
<option value="none" selected >----Select ----</option>
<option id="1">2016</option>
<option id="2">2015</option>
<option id="3">2014</option>
<option id="4">2013</option>
<option id="5">2012</option>
<option id="6">2011</option>
<option id="7">2010</option>
<option id="1">2009</option>
<option id="2">2008</option>
<option id="3">2007</option>
<option id="4">2006</option>
<option id="5">2005</option>
<option id="6">2004</option>
<option id="7">2003</option>
<option id="1">2002</option>
<option id="2">2001</option>
<option id="3">2000</option>
<option id="4">1999</option>
<option id="5">1998</option>
<option id="6">1997</option>
<option id="7">1996</option>
<option id="1">1995</option>
<option id="2">1994</option>
<option id="3">1993</option>
<option id="4">1992</option>
<option id="5">1991</option>
<option id="6">1990</option>
<option id="7">1989</option>
<option id="2">1988</option>
<option id="3">1987</option>
<option id="4">1986</option>
<option id="5">1985</option>
<option id="6">1984</option>
<option id="7">1983</option>
<option id="5">1982</option>
<option id="6">1981</option>
<option id="7">1980</option>
</select>
</td>
</tr>
<tr>
<td ><span>Duration:</span></td>
<td ><input name="duration" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<td ><span>Achievement:</span></td>
<td ><input name="achievement" type="text" id="name" size="19" class=""/></td>
</tr>
<tr><td> <input type="submit" name="submit" value="submit" />
</td></tr>
<tr><td> <input type="button" name="addmore" value="Add more" onclick="func_addmore()" />
</td></tr>
</table>
</div>
</form>
</body>
Is there any way to do that? Thanks in advance.I hope i will find out my answer through you guys.Thank you.

The jQuery .clone() method offers the option to also clone events. Please note that by default this option is not used. In order to clone events you need to use:
$(this).clone(true).insertAfter(this);
More detail at jQuery.clone()

I want to note that the .clone() method in jQuery only clones DOM elements. In order to clone JavaScript objects, you would do:
// Shallow copy
var newObject = jQuery.extend({}, oldObject);
// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);
More information can be found in the jQuery documentation.
I also want to note that the deep copy is actually much smarter than what is shown above – it's able to avoid many traps (trying to deep extend a DOM element, for example). It's used frequently in jQuery core and in plugins to great effect.

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

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>