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

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>

Related

Jquery How to select ul inside td of selected row

How to select <ul> inside <td> of selected row.
here is my html and jquery code.
Help me to resolve this issue.
I am trying to select <ul> tag inside <td> to insert fetched data by ajax.
this is jquery code.
$('.result').click(function () {
var tpid = $(this).parents('tr').find('.tpId').val();
$.ajax({
type: "POST",
url: "/Reception/PatientTests/getHelpValue",
data: { 'tpid': tpid },
success: function (data) {
str = "";
for (var i = 0; i < data.length; i++) {
str +="<li>"+data[i] + "</li>";
}
$(this).find('td ul').html(str);
},
error: function (e) {
alert('Error' + JSON.stringify(e));
}
});
});
this is my html code.
<table class="table table-bordered table-sm" style="height:auto">
<tbody><tr class="blue-gradient-rgba text-white">
<th>Test Name</th>
<th>Value</th>
<th>Unit</th>
<th>Normal</th>
<th>Minimum</th>
<th>Maximum</th>
</tr>
<tr>
<input type="hidden" class="tid" value="2">
<th colspan="2">COMPLETE BLOOD COUNT</th>
</tr>
<tr>
<td>Haemoglobin</td>
<td>
<input type="hidden" class="tpId" value="9">
<input type="text" class="result" value="45">
<ul class="helpValues"></ul>
</td>
<td>gm %</td>
<td>m-14.0 to 18.0 Gms. %
F- 12.5 to 16.0 Gms. %</td>
<td></td>
<td></td>
</tr>
<tr>
<td>MCV</td>
<td>
<input type="hidden" class="tpId" value="12">
<input type="text" class="result" value="75">
<ul class="helpValues"></ul>
</td>
<td>fl</td>
<td>76- 96</td>
<td></td>
<td></td>
</tr>
<tr>
<input type="hidden" class="tid" value="3">
<th colspan="2">DENGUE IgG /IgM</th>
</tr>
<tr>
<td>Dengue IgG</td>
<td>
<input type="hidden" class="tpId" value="13">
<input type="text" class="result" value="53">
<ul class="helpValues"></ul>
</td>
<td>ml</td>
<td></td>
<td>1 mL serum</td>
<td></td>
</tr>
<tr>
<td>Dengue IgM</td>
<td>
<input type="hidden" class="tpId" value="14">
<input type="text" class="result">
<ul class="helpValues"></ul>
</td>
<td>ml</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Dengue NS1</td>
<td>
<input type="hidden" class="tpId" value="15">
<input type="text" class="result">
<ul class="helpValues"></ul>
</td>
<td>ml</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody></table>
I tried this $(this).find('td ul').html(str); but it's not working.
here I want to add data into ul of the particular row.
.tpId is just previous and ul is just next to the .result. So, you can use prev and next:
var tpid = $(this).parents('tr').find('.tpId').val();
// Alternative:
var tpid = $(this).prev().val(); // I love this approach
// This is wrong
$(this).find('td ul').html(str);
// You're finding from `.result`
// So, use:
$(this).parents('tr').find('ul').html(str);
// But, you can do just
$(this).next().html(str); // I love this approach
As far as my understanding, you try to access 'ul', inside of your 'td'. Here is the block of code which includes ul inside of td.
<tr>
<td>MCV</td>
<td>
<input type="hidden" class="tpId" value="12">
<input type="text" class="result" value="75">
<ul class="helpValues"></ul>
</td>
<td>fl</td>
<td>76- 96</td>
<td></td>
<td></td>
</tr>
Jquery code
$(".result").on("click",function()
{
let ul=$(this).parent().find("ul");
let ulValues=$(ul).val();
console.log(ulValues);
})

select all checkboxes in FooTable with pagination and filtering

I am currently working on a FooTable project where I am trying to create a 'select all' checkbox. I have run in to two issues and I cannot figure out how to proceed;
I can select all items, either ALL items (irrespective of filtering)
or just the items on the page.
I can get all the rows to show up, and select, but It will not filter.
I can apply a filter, and still selects all rows.
What I am looking for is a way to only select the filtered rows checkboxes, even if the rows are on different pages. I figured a cheaky way to accomplish this would be:
increase pageSize to more than the amount of filtered rows
select all checkboxes in shown rows
revert back to OG pageSize
<table class="tg" data-paging="true" data-paging-size="3" data-filtering="true">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Select All:<input type="checkbox" class="check-all"></td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>4</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>5</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>6</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>7</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>8</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>9</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>10</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>11</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
</tbody>
</table>
jQuery(function($) {
$('.tg').footable();
function changePageSize(qs_table, num_rows_page) {
let newSize = num_rows_page;
FooTable.get(qs_table).pageSize(newSize);
}
function checkedAll(qs_table, qs_checkbox, num_column, checked) {
var ft = FooTable.get(qs_table)
ft.pageSize(11);
FooTable.init(qs_table);
let rows = ft.rows.all;
rows.forEach(function(row) {
row.draw(); //REQUIRED for js rendering row, else selected only chockboxes on the active page
$(qs_checkbox, row.cells[num_column].$el[0]).prop('checked', checked);
});
}
$(document).on("change", ".check-all", function() {
checkedAll(".tg", ".check-one", 2, $(this).prop('checked'));
});
});
Here is my JSFiddle: https://jsfiddle.net/T3DDIE_B3AR/pe2usL5r/

After checked values is not getting unchecked

My requirement is once I click on checkbox and save/update textbox should be disabled and when I uncheck and save/update textbox should be enabled. During check latest_file value should be 1 and during uncheck its value should be 0. Here is my code which I tried:
function disableFileName() {
var latestFile = $("#latestFile").is(":checked");
if (latestFile) {
$("#fileName").attr("disabled", "disabled");
} else {
$("#fileName").removeAttr("disabled");
}
}
<table>
<tr>
<td>Process the latest file from the feed location </td>
<td>
<s:checkbox property="latestFile" styleId="latestFile" value="1" onclick="disableFileName();" tabindex="5" />
</td>
</tr>
<tr>
<td>File Name</td>
<td nowrap="true">
<s:text property="fileName" styleClass="textbox" styleId="fileName" style="{width:150}" tabindex="6" />
</td>
</tr>
</table>
javascript at Question returns expected result where disableFileName, #latestFile, #fileName are defined. To toggle value of #latestFile you can use $("#latestFile").val(1); at if, $("#latestFile").val(1); at else
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function disableFileName() {
var latestFile = $("#latestFile").is(":checked");
if (latestFile) {
$("#latestFile").val(1);
$("#fileName").attr("disabled", "disabled");
} else {
$("#latestFile").val(0);
$("#fileName").removeAttr("disabled");
}
console.log($("#latestFile").val());
}
</script>
<table>
<tr>
<td>Process the latest file from the feed location</td>
<td>
<input type="checkbox" property="latestFile" id="latestFile" value="1" onclick="disableFileName();" tabindex="5" />
</td>
</tr>
<tr>
<td>File Name</td>
<td nowrap="true">
<input type="text" property="fileName" class="textbox" id="fileName" style="width:150" tabindex="6" />
</td>
</tr>
</table>
Try using prop instead of attr to disable the checkbox as shown below:
$("#fileName").prop("disabled", "true");
HTML:
<table>
<tr>
<td>Process the latest file from the feed location </td>
<td>
<input type="checkbox" id="latestFile" value="1" onclick="disableFileName();" tabindex="5" />
</td>
</tr>
<tr>
<td>File Name</td>
<td nowrap="true">
<input type="textbox" name="fileName" styleClass="textbox" id="fileName" style="width:150" tabindex="6" />
</td>
</tr>
</table>
Javascript:
function disableFileName() {
var latestFile = $("#latestFile").is(":checked");
if (latestFile) {
$("#fileName").prop("disabled", "true");
$("#latestFile").attr("value", "1");
} else {
$("#fileName").removeAttr("disabled");
$("#latestFile").attr("value", "0");
}
}
Here is the demo: JSFiddle Demo

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>

Jquery disable is not working

<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("input[name='data[Store][id][]']").change(function () {
if ($("input[name='data[Store][id][]']").is(':checked')) {
var input_value = parseFloat($(this).val());
var brand= $(this).closest('tr').find('#brand').text();
var number1 = $(this).closest('tr').find('input[name="data[store][stock_received][]"]').attr('disabled', 'disabled');
}else{
var number1 = $(this).closest('tr').find('input[name="data[store][stock_received][]"]').prop("disabled", false);
}
});
});
</script>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td><input id='tmpid' name="data[store][stock_received][]" ></td>
<td><input type='checkbox' name='data[Store][id][]'></td>
</tr>
<tr>
<td><input id='tmpid' name="data[store][stock_received][]"></td>
<td><input type='checkbox' name='data[Store][id][]'></td>
</tr>
<tr>
<td><input id='tmpid' name="data[store][stock_received][]"></td>
<td><input type='checkbox' name='data[Store][id][]'></td>
</tr>
<tr>
<td><input id='tmpid' name="data[store][stock_received][]"></td>
<td><input type='checkbox' name='data[Store][id][]'></td>
</tr>
<tr>
<td><input id='tmpid' name="data[store][stock_received][]"></td>
<td><input type='checkbox' name='data[Store][id][]'></td>
</tr>
</table>
</body>
</html>
jquery disable is not working properly and I want to disable id=tmpid near near name='data[Store][id][]'.
Currently i m using name='data[store][stock_received][]' name near name='data[Store][id][]'.
For individual check box its working fine . If I select all then i uncheck then its not working properly
1)ID should be unique
2)You are using parseFloat() on an string
3)$("input[name='data[Store][id][]']").is(':checked') seems in correct
should be $(this).is(":checked")
$(document).ready(function() {
$("input[name='data[Store][id][]']").change(function() {
if ($(this).is(':checked')) {
var input_value = $(this).val();
var brand = $(this).closest('tr').find('#brand').text();
var number1 = $(this).closest('tr').find('input[name="data[store][stock_received][]"]').attr('disabled', 'disabled');
} else {
var number1 = $(this).closest('tr').find('input[name="data[store][stock_received][]"]').prop("disabled", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>
<input class='tmpid' name="data[store][stock_received][]">
</td>
<td>
<input type='checkbox' name='data[Store][id][]'>
</td>
</tr>
<tr>
<td>
<input class='tmpid' name="data[store][stock_received][]">
</td>
<td>
<input type='checkbox' name='data[Store][id][]'>
</td>
</tr>
<tr>
<td>
<input class='tmpid' name="data[store][stock_received][]">
</td>
<td>
<input type='checkbox' name='data[Store][id][]'>
</td>
</tr>
<tr>
<td>
<input class='tmpid' name="data[store][stock_received][]">
</td>
<td>
<input type='checkbox' name='data[Store][id][]'>
</td>
</tr>
<tr>
<td>
<input class='tmpid' name="data[store][stock_received][]">
</td>
<td>
<input type='checkbox' name='data[Store][id][]'>
</td>
</tr>
</table>

Categories