We Keep Coding

How to access element attribute whose display is none?

I am trying to access the attribute/value of 'schoolidx' that is not hidden, when add button is clicked; however I am having hard time accessing it.
Can someone guide me please? I am trying to get only "1", or "2", or "3" depending on which one is not hidden ("display: none;"). In this case, "1".
Tried different methods:
let schoolIndex = $('#schoolTableBody > tr:not([style*="display: none"])').attr("schoolidx"),
schoolIndex2 = $('tr').filter(function(){ return $(this).css("display") != "none";}).attr("schoolidx"),
schoolIndex3 = $('tr').filter(function(){ return $(this).css("display") != "none";}).attr("schoolidx"),
schoolIndex4 = $("#schoolTableBody > tr:visible")
<table class="table table-striped table-hover table-condensed" id="schoolTable">
<thead>
<tr>
<th> </th>
<th>School Name</th>
<th>Country</th>
</tr>
</thead>
<tbody id="schoolTableBody">
<tr class="school-row" style="">
<td><button id="addSchoolBtn" title="Add" style="width:50px"/></td>
<td><input type="text" name="sName" id="sName"></td>
<td><input type="text" name="Country" id="Country"></td>
</tr>
<tr schoolidx="1" style="">
<td> </td>
<td><input type="hidden" name="sName" value="SK">SK</td>
<td><input type="hidden" name="Country" value="US">US</td>
</tr>
<tr schoolidx="1" style="">
<td> </td>
<td><input type="hidden" name="sName" value="JS">JS</td>
<td><input type="hidden" name="Country" value="US">US</td>
</tr>
<tr schoolidx="2" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="CAS">CAS</td>
<td><input type="hidden" name="Country" value="CA">CA</td>
</tr>
<tr schoolidx="2" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="AM">AM</td>
<td><input type="hidden" name="Country" value="CA">CA</td>
</tr>
<tr schoolidx="3" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="BAS">BAS</td>
<td><input type="hidden" name="Country" value="BR">BR</td>
</tr>
</tbody>
</table>

Instead of attempting to search by styling, perhaps you could add an 'active' class when you unhide a given row, and remove it when you hide it again.
You can then search using jQuery. var schoolid = $("tr.active").prop("schoolidx");
Have a look at addClass and removeClass. I assume you already have the ability to hide each row. Just add those two functions to that bit of code.

Note that I have changed your 'attribute' to a valid data attribute
For the JS, we have to make sure we're only selecting the tr's within the tbody but not the first tr as thats where the add button is.
Then do an if() within an onclick to check to see if the display is set to none
<button> aren't self closing, they require a </button>
document.getElementById('addSchoolBtn').addEventListener('click', () => {
document.querySelectorAll('#schoolTableBody tr:not(.school-row)').forEach(tr => {
if (tr.style.display !== "none") alert(tr.dataset.schoolidx)
})
})
<table class="table table-striped table-hover table-condensed" id="schoolTable">
<thead>
<tr>
<th> </th>
<th>School Name</th>
<th>Country</th>
</tr>
</thead>
<tbody id="schoolTableBody">
<tr class="school-row" style="">
<td><button id="addSchoolBtn" title="Add" style="width:50px">Add</button></td>
<td><input type="text" name="sName" id="sName"></td>
<td><input type="text" name="Country" id="Country"></td>
</tr>
<tr data-schoolidx="1" style="">
<td> </td>
<td><input type="hidden" name="sName" value="SK">SK</td>
<td><input type="hidden" name="Country" value="US">US</td>
</tr>
<tr data-schoolidx="1" style="">
<td> </td>
<td><input type="hidden" name="sName" value="JS">JS</td>
<td><input type="hidden" name="Country" value="US">US</td>
</tr>
<tr data-schoolidx="2" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="CAS">CAS</td>
<td><input type="hidden" name="Country" value="CA">CA</td>
</tr>
<tr data-schoolidx="2" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="AM">AM</td>
<td><input type="hidden" name="Country" value="CA">CA</td>
</tr>
<tr data-schoolidx="3" style="display: none;">
<td> </td>
<td><input type="hidden" name="sName" value="BAS">BAS</td>
<td><input type="hidden" name="Country" value="BR">BR</td>
</tr>
</tbody>

How to customize jAutoCalc plugin

I have a simple question regarding jAutoCalc, my question can be answered in two ways:
1> How to customize the jAutoCalc plugin so that we can make it able to be used for input array names instead of just names.
my code is here:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/c17r/jAutoCalc/master/jAutoCalc.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
function autoCalcSetup() {
$('form[name=cart]').jAutoCalc('destroy');
$('form[name=cart] tr[name=line_items]').jAutoCalc({
keyEventsFire: true,
decimalPlaces: 2,
emptyAsZero: true
});
$('form[name=cart]').jAutoCalc({
decimalPlaces: 2
});
}
autoCalcSetup();
$('button[name=remove]').click(function(e) {
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e) {
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=line_items]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
});
</script>
</head>
<body>
<form name="cart">
<table name="cart">
<tr>
<th></th>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th> </th>
<th>Item Total</th>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" name="qty" value="1"></td>
<td><input type="text" name="price" value="9.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>More Stuff</td>
<td><input type="text" name="qty" value="2"></td>
<td><input type="text" name="price" value="12.50"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>And More Stuff</td>
<td><input type="text" name="qty" value="3"></td>
<td><input type="text" name="price" value="99.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" name="sub_total" value="" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>
Tax:
<select name="tax">
<option value=".06">CT Tax</option>
<option selected value=".00">Tax Free</option>
</select>
</td>
<td> </td>
<td><input type="text" name="tax_total" value="" jAutoCalc="{sub_total} * {tax}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Total</td>
<td> </td>
<td><input type="text" name="grand_total" value="" jAutoCalc="{sub_total} + {tax_total}"></td>
</tr>
<tr>
<td colspan="99"><button name="add">Add Row</button></td>
</tr>
</table>
</form>
</body>
</html>
since the names are same for dynamically generated input's i want use input array. The problem is that if i do so then I'm unable to use the plugin features!
2> The question can be answered in second way by providing methods to use plugin while using input arrays

I know its an old post but maybe others may have same issue.
Try to open jautocalc.js find this function "getFieldSelector(field)" and edit this code.
return ':input[name="' + field + '"]';
to
return ':input[name="' + field + '[]"]';

I think the whole problem is with javascript
the javascript should be like
$(document).ready(function(){
$('.item_total').keyup(function(){
$('your result input name here).text($('.item_total').val() * 1.5);
});
});
this link will help you:
http://jsfiddle.net/7BDwP/
You will get idea from the above link what i am trying to say

How can I swap the form values of table row1 by the form values of table row2 without changing the table rows using javascript?

I am trying to swap the form values in row1 with the form values of row2 without swapping the rows. Can someone show me away to achieve this in pure Javascript, vanilla JS, or jQuery. I made the table rows shorter with just two rows, but the actual table consists of 17 rows. Please look very closely at the ids and form values in the third example.
When the UP or DOWN button is not click, the table looks like this in simple form:
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td><button class="up_arrow">UP</button></td>
<td><input value="1></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
<td><img id="img1"></td>
</tr>
<tr id="row2">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
<td><img id="img2"></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>
This the code currently - When the UP or DOWN buttons are clicked the table looks like this:
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row2">
<td><button class="up_arrow">UP</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
<td><img id="img2"></td>
</tr>
<tr id="row1">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="1"></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
<td><img id="img1"></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>
This is what I am trying to accomplish - The values of the inputs should swap except for the tr. Notices the tr ids remain the same but form values are swapped:
Is there a way to achieve this in pure javascript, vanilla JS, or jquery. It will even be even better if this can be done with .html() instead of .val()
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
<td><img id="img2"></td>
</tr>
<tr id="row2">
<td><button class="up_arrow">UP</button></td>
<td><input value="1"></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
<td><img id="img1"></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>

Sorry it took awhile to get back to this. I am submitting this as another answer so that you can compare the two solutions. They are quite similar, and you may find it useful to compare the changes.
jsFiddle Solution
var tbl = $('table'),new_ndx,topRow,trStuff,botRow,brStuff;
$(document).on('click','button',function() {
var dir = $(this).attr('class');
var row = $(this).closest("tr");
var ndx = row.index();
//row.remove();
if (dir=='up_arrow'){
new_ndx = ndx-1;
topRow = tbl.find('tr').eq(new_ndx);
trStuff = topRow.html();
botRow = tbl.find('tr').eq(ndx);
brStuff = botRow.html();
topRow.html(brStuff);
botRow.html(trStuff);
} else {
new_ndx = ndx++;
topRow = tbl.find('tr').eq(new_ndx);
trStuff = topRow.html();
botRow = tbl.find('tr').eq(ndx);
brStuff = botRow.html();
topRow.html(brStuff);
botRow.html(trStuff);
}
});

$(document).ready(function() {
$(".up_arrow,.down_arrow").click(function() {
var row = $(this).parents("tr");
if ($(this).is(".up_arrow")) {
alert("Inner Html Of Previous Row : " + row.prev().html());
} else {
alert("Inner Html Of Next Row : " + row.next().html());
}
});
});
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="1">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="2">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="3">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="4">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="5">
</td>
</tr>
</table>

$(document).ready(function() {
$(".up_arrow,.down_arrow").click(function() {
var objRow = $(this).parents("tr");
var intCurrentInputValue = objRow.find("input").val();
if ($(this).is(".up_arrow")) {
var intPreviousInputValue = objRow.prev("tr").find("input").val();
objRow.find("input").val(intPreviousInputValue);
objRow.prev("tr").find("input").val(intCurrentInputValue);
} else {
var intNextInputValue = objRow.next("tr").find("input").val();
objRow.find("input").val(intNextInputValue);
objRow.next("tr").find("input").val(intCurrentInputValue);
}
});
});
table tr:first-child .up_arrow ,
table tr:last-child .down_arrow
{
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="1">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="2">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="3">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="4">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="5">
</td>
</tr>
</table>

I'm not entirely sure what you're trying to achieve, but your code is a bit all over the place.
Here's a sample of a pretty basic 'up/down' table row thingy.
Try not to mix using jQuery and vanilla JS. If you're using jQuery, you shouldn't need to use document.getElementsByClassName (or anything similar) at all. Use the $('.class') selector.
$('table').on('click', '.up', function(){
var $row = $(this).parents('tr');
var $prevRow = $(this).parents('tr').prev('tr');
$row.insertBefore($prevRow);
});
$('table').on('click', '.down', function(){
var $row = $(this).parents('tr');
var $prevRow = $(this).parents('tr').next('tr');
$row.insertAfter($prevRow);
});

$(document).ready(function() {
$(".up_arrow,.down_arrow").click(function(e) {
var objCurrentRow = $(this).parents("tr");
var objAnotherRow = objCurrentRow.next("tr");
if ($(this).is(".up_arrow")) {
var objAnotherRow = objCurrentRow.prev("tr");
}
var arrAllInputOfCurrentRow = objCurrentRow.find("input,select");
var arrAllInputOfAnotherRow = objAnotherRow.find("input,select");
$.each(arrAllInputOfCurrentRow, function(intIndex, objInput) {
var mixTempValue = $(objInput).val();
var $objAnotherInput = $(arrAllInputOfAnotherRow[intIndex]);
$(objInput).val($objAnotherInput.val());
if ($objAnotherInput.is('select')) {
var objTempDropDown = $(objInput).html();
$(objInput).html($objAnotherInput.html());
$objAnotherInput.html(objTempDropDown);
}
$objAnotherInput.val(mixTempValue);
});
});
});
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="1" />
</td>
<td>
<select>
<option value="1" selected>1</option>
</select>
</td>
<td>
<select>
<option value="1a" selected>1a</option>
</select>
</td>
</tr>
<tr id="row2">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="2" />
</td>
<td>
<select>
<option value="2" selected>2</option>
</select>
</td>
<td>
<select>
<option value="2a" selected>2a</option>
</select>
</td>
</tr>
<tr id="row3">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="3" />
</td>
<td>
<select>
<option value="3" selected>3</option>
</select>
</td>
<td>
<select>
<option value="3a" selected>3a</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>

$(document).on("click", ".up_arrow,.down_arrow", function(e) {
var $objCurrentRow = $(this).parents("tr");
var strTempHtml = $objCurrentRow.html();
var $objAnotherRow = $objCurrentRow.next("tr");
if ($(this).is(".up_arrow")) {
var $objAnotherRow = $objCurrentRow.prev("tr");
}
$objCurrentRow.html($objAnotherRow.html());
$objAnotherRow.html(strTempHtml);
});
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="1" />
</td>
<td>
<select>
<option value="1" selected>1</option>
</select>
</td>
<td>
<select>
<option value="1a" selected>1a</option>
</select>
</td>
<td>
<img src="http://www.w3schools.com/images/compatible_chrome.gif" id="img1" />
</td>
</tr>
<tr id="row2">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="2" />
</td>
<td>
<select>
<option value="2" selected>2</option>
</select>
</td>
<td>
<select>
<option value="2a" selected>2a</option>
</select>
</td>
<td>
<img src="http://www.w3schools.com/images/compatible_opera.gif" id="img2" />
</td>
</tr>
<tr id="row3">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="3" />
</td>
<td>
<select>
<option value="3" selected>3</option>
</select>
</td>
<td>
<select>
<option value="3a" selected>3a</option>
</select>
</td>
<td>
<img src="http://www.w3schools.com/images/compatible_firefox.gif" id="img3" />
</td>
</tr>
</tbody>
</table>
</form>

Ali beat me to the punch, but here's another way to do it:
jsFiddle Demo
var tbl = $('table'),new_ndx;
$(document).on('click','button',function() {
var dir = $(this).attr('class');
var row = $(this).closest("tr");
var ndx = row.index();
row.remove();
if (dir=='up_arrow'){
new_ndx = ndx-1;
tbl.find('tr').eq(new_ndx).before(row);
}else{
new_ndx = ndx++;
tbl.find('tr').eq(new_ndx).after(row);
}
});
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {visibility: hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="1">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="2">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="3">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="4">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="5">
</td>
</tr>
</table>

Disabling certain inputs in table on button press

I currently have a table that contains a few values, 2 input fields and a button for each row in that table. What I want to happen is that when I press the button in the third row, the input fields in the third row become disabled. The other rows should remain unaffected. Unfortunately, due to the nature of the program, adding ID's to the inputs and buttons is not possible.
Does anyone know of a good way to go about this?
<tr>
<td>Text A</td>
<td>Text B</td>
<td><input class="editable"></td>
<td>Text C</td>
<td><input class="editable></td>
<td>Text D</td>
<td><button class="disableInput">OK</button></td>
<tr>
I have ~40 rows like this
Also, due to the table constantly autosaving to a database (for the input) the table gets refreshed every ~0.5 seconds

$(tableId).on("click", "button", function(){
$(this).closest("tr").find("input").attr("disabled", true);
})

Since you are using jQuery, you can do something like this:
$(document).ready(function() {
$("table td .btn").click(function() {
if ($(this).closest("tr").find("input").attr("disabled") === "disabled"){
$(this).closest("tr").find("input").removeAttr("disabled", "disabled");
$(this).closest("tr").find("button").text("Disbale");
}
else{
$(this).closest("tr").find("input").attr("disabled", "disabled");
$(this).closest("tr").find("button").text("Enable");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
</tbody>
</table>

You can do this via traversing the DOM.
$('.disableInput').on('click',function(){
var input = $(this).closest('tr').find('input');
var currstatus = input.prop('disabled');
input.prop('disabled',!currstatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
</table>

How Can i make a table section hidden and display after click

Here is what i am doing.. its categorized table where when clicked to button shows detail regarding otherwise remain hidden, CSS is working good for me, problem is when i click on button to display tbody nothing happens, can't get what's wrong with it. have a look on my code..
css for make him hidden unless he is not clicked,
.down1 {
display: none;
}
$(document).ready(function(){
$("#show1").click(function(){
$(".down1").toggle();
});
});
<table align="center" cellpadding="10" width="300">
<tr>
<th bgcolor="brown"></th>
<th bgcolor="brown">Day</th>
<tr>
<td align="center" bgcolor="lightgrey">
<input type="button" value="+" id="show1" />
</td>
<td align="center" bgcolor="lightgrey">Monday</td>
<tbody class="down1">
<tr>
<td>
<input type="checkbox" />
</td>
<td>9:00 -10:00 (time) </td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>9:00 -10:00 (time)</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>9:00 -10:00 (time)</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>9:00 -10:00 (time)</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>9:00 -10:00 (time)</td>
</tbody>
</tr>
</tr>
</table>

This example can help you : Example
$(document).ready(function(){
$("#show1").click(function(){
$(".down1").toggle();
if ($(this).val() == '+') {
$(this).val('-');
} else $(this).val('+');
});
});

Not sure but is this what you want?
JSfiddle:
http://jsfiddle.net/yoy5xph3/1/
$(".down1").toggle();
$("#show1").click(function(){
$(".down1").toggle();
});
I removed the css and toggled the .down1 at the start so it hides.

You can show my DEMO CODE
It's working
Jquery
$(document).ready(function(){
$("#show1").click(function(){
$(".down1").toggle();
if ($(this).val() == '+') {
$(this).val('-');
} else $(this).val('+');
});
});
Markup
<tbody class="down1">
<tr>
<td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>9:00 -10:00 (time) </td>
</tr>
</tbody>