Display respective text box when checkbox is checked in the table which is inside the form.
The rows will generate dynamically depending upon the data send from the server, along with the data.
When the checkbox is checked the text box of that row should be displayed otherwise it should be hidden
<div class="container-fluid">
<form class="available-products-table">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"/></td>
<td><input type="text" name="send-quality" id="send-quality"/></td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"/></td>
<td><input type="text" name="send-quality" id="send-quality"/></td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"/></td>
<td><input type="text" name="send-quality" id="send-quality"/></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="text" name="send-franchise-is" id="product-status" required/></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary/"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
You can try this:
$(".table input[name='product-status']").change(function(){
if($(this).is(":checked")){
$(this).parents("tr:eq(0)").find("input[name='send-quality']").show();
}
else{
$(this).parents("tr:eq(0)").find("input[name='send-quality']").hide();
}
});
input[name='send-quality']
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form class="available-products-table">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" name="send-quality" id="send-quality"</td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" name="send-quality" id="send-quality"></td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" name="send-quality" id="send-quality"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="text" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
Using $(this).is(":checked"), see if the checkbox is checked. If it is checked, show the relevant input box. I have added a class hidden to each input box for this demo:
$('input[type=checkbox]').on('click', function() {
if ($(this).is(":checked"))
$(this).parents("tr:first").find('.hidden').show();
else
$(this).parents("tr:first").find('.hidden').hide();
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form class="available-products-table">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" class='hidden' name="send-quality" id="send-quality" /> </td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" class='hidden' name="send-quality" id="send-quality"></td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" class='hidden' name="send-quality" id="send-quality"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="text" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
Related
I have been looking around everywhere for a solution and I just can't find any.
What I'm trying to do here is get the third column value i.e price when the checkbox in the first column is selected. I'll eventually use the column value to calculate the total which will be thrown into a div.
<body>
<form action="" method="post"><table id="tableid">
<tr>
<th><b>Menu:</b></th>
</tr>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="27"></td>
<td>Item1</td>
<td class="">100</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="28"></td>
<td>Item2</td><td class="">200</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="29"></td>
<td>Item3</td>
<td class="">300</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="30"></td>
<td>Item4</td>
<td class="">400</td>
</tr>
</table>
</form>
<div id="container"></div>
</body>
I've tried several options from $(this).parent().find()....and nth-child() but i don't seem to be getting how "this" works
sample code:
$(document).ready(function(){
$('.chkbx').change(function(){
$('.chkbx:checked').each(function(){
total+=parseInt($(this).parent().find("td").text());
});
//var item=$(".chkbx tr:nth-child(2)").text();
$("#container").html(total);
});
});
Is my approach wrong? How should I go about this? Will using classes be of any help?
Thanks in Advance!!
P.S: Very new to JS and JQuery.
You need to target last td element so you can use .closest() to traverse up-to <TR> then use .eq(index)1 to target the desired element
total+= parseInt($(this).closest('tr').find("td:eq(2)").text(), 10);
$(document).ready(function() {
$('.chkbx').change(function() {
var total = 0;
$('.chkbx:checked').each(function() {
total += parseInt($(this).closest('tr').find("td:eq(2)").text(), 10);
});
console.clear();
console.log(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableid">
<tr>
<th><b>Menu:</b></th>
</tr>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="27"></td>
<td>Item1</td>
<td class="">100</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="28"></td>
<td>Item2</td>
<td class="">200</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="29"></td>
<td>Item3</td>
<td class="">300</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="30"></td>
<td>Item4</td>
<td class="">400</td>
</tr>
</table>
1I would recommend, assigning a CSS class to target the element rather than using index.
HTML
<td class="price">400</td>
Script
total+= parseInt($(this).closest('tr').find("td.price").text(), 10);
You can use siblings with last like this.
$(this).parent().siblings(":last").text();
Use need to use closest() to find the tr then use find with :nth-child() to get the specific td
$(document).ready(function(){
$('.chkbx').change(function(){
var total = 0;
$('.chkbx:checked').each(function(){
total+=parseInt($(this).closest('tr').find("td:nth-child(3)").text());
});
//var item=$(".chkbx tr:nth-child(2)").text();
$("#container").text(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post"><table id="tableid">
<tr>
<th><b>Menu:</b></th>
</tr>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="27"></td>
<td>Item1</td>
<td class="">100</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="28"></td>
<td>Item2</td><td class="">200</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="29"></td>
<td>Item3</td>
<td class="">300</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="30"></td>
<td>Item4</td>
<td class="">400</td>
</tr>
</table>
</form>
<span id='container'> </span>
You were not tracking the TD for price column correctly, and you need to declare the total variable outside the .each() otherwise the scope wont allow to access the variable and populate the total, see below for a demo
var total = 0;
$(document).ready(function() {
$('.chkbx').change(function() {
$('.chkbx:checked').each(function() {
//console.log($(this).parent().next().next().text());
total += parseInt($(this).parent().next().next().text());
});
//var item=$(".chkbx tr:nth-child(2)").text();
$("#container").html(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
TOTAL
<div id="container"></div>
<form action="" method="post">
<table id="tableid">
<tr>
<th><b>Menu:</b></th>
</tr>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="27"></td>
<td>Item1</td>
<td class="">100</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="28"></td>
<td>Item2</td>
<td class="">200</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="29"></td>
<td>Item3</td>
<td class="">300</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="30"></td>
<td>Item4</td>
<td class="">400</td>
</tr>
</table>
</form>
I need to print the word of Emails on click of all checkboxes. How can I do that? Here is my HTML structure:
$('td input').on('change', function() {
var header_name = $(this).closests('tr').sibilings('th').last().text();
console.log(header_name);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th><input type="checkbox" class="all_checkboxes"></th>
<th>Emails</th>
</tr>
<tr>
<td><input type="checkbox" data-id="email"></td>
<td>email</td>
</tr>
<tr>
<td><input type="checkbox" data-id="gmail"></td>
<td>gmail</td>
</tr>
<tr>
<td><input type="checkbox" data-id="aol"></td>
<td>aol</td>
</tr>
<tr>
<td><input type="checkbox" data-id="chmail"></td>
<td>chmail</td>
</tr>
</tbody>
</table>
Firstly you have a couple of typos. closests() should be closest() and sibilings() needs to be siblings().
The issue itself is because your DOM traversal is not correct. You're trying to look at sibling th of the parent tr to the clicked input, when the th you're aiming for is in a completely different row.
To fix this you should use closest() to get the table, then find() the tr:last, like this:
$('td input').on('change', function() {
var header_name = $(this).closest('table').find('th:last').text();
console.log(header_name);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th><input type="checkbox" class="all_checkboxes"></th>
<th>Emails</th>
</tr>
<tr>
<td><input type="checkbox" data-id="email"></td>
<td>email</td>
</tr>
<tr>
<td><input type="checkbox" data-id="gmail"></td>
<td>gmail</td>
</tr>
<tr>
<td><input type="checkbox" data-id="aol"></td>
<td>aol</td>
</tr>
<tr>
<td><input type="checkbox" data-id="chmail"></td>
<td>chmail</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th><input type="checkbox" class="all_checkboxes"></th>
<th>Emails</th>
</tr>
<tr>
<td><input type="checkbox" data-id="email"></td>
<td>email</td>
</tr>
<tr>
<td><input type="checkbox" data-id="gmail"></td>
<td>gmail</td>
</tr>
<tr>
<td><input type="checkbox" data-id="aol"></td>
<td>aol</td>
</tr>
<tr>
<td><input type="checkbox" data-id="chmail"></td>
<td>chmail</td>
</tr>
</tbody>
</table>
<script>
$('td input, th input').on('change', function(){
var header_name = $( "tr:first" ).last().text();
console.log(header_name);
})
</script>
I want When single checkbox is selected that time Edit and Delete Button are Enable, Add Button Disable
When Two or more checkbox are selected that time Delete Button is Enable and Add and Edit Button are Disable
My Html Code :
<div>
<button type="button" id="btnAddID" name="btnAdd"> Add </button>
<button type="button" id="btnEditID" name="btnEdit"> Edit </button>
<button type="button" id="btnDeleteID" name="btnDelete"> Delete </button>
</div>
<br/>
<div>
<table>
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>ABC</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>XYZ</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>PQR</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>MLN</td>
</tr>
</tbody>
</table>
</div>
</div>
I guess this snippet is what you need.
This is the simplest way but you could do better if you want.
$(document).ready(function(){
$('input[type=checkbox]').change(function(){
var count = 0;
$.each($('input[type=checkbox]'), function(){
if($(this).prop('checked') == true){
count++;
}
});
if(count == 1) {
$('#btnEditID').prop('disabled', false);
$('#btnDeleteID').prop('disabled', false);
$('#btnAddID').prop('disabled', true);
}
else {
$('#btnDeleteID').prop('disabled', false);
$('#btnEditID').prop('disabled', true);
$('#btnAddID').prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<button type="button" id="btnAddID" name="btnAdd"> Add </button>
<button type="button" id="btnEditID" name="btnEdit"> Edit </button>
<button type="button" id="btnDeleteID" name="btnDelete"> Delete </button>
</div>
<br/>
<div>
<table>
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>ABC</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>XYZ</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>PQR</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>MLN</td>
</tr>
</tbody>
</table>
</div>
</div>
Try this:
$('input[type="checkbox"]').change(function(){
var checked = $('input[type="checkbox"]:checked').length;
if(checked === 0){
$("button").prop('disabled',false);
}else if(checked === 1){
$("button").prop('disabled',false);
$("#btnAddID").prop('disabled', true);
}else{
$("#btnAddID,#btnEditID").prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button type="button" id="btnAddID" name="btnAdd"> Add </button>
<button type="button" id="btnEditID" name="btnEdit"> Edit </button>
<button type="button" id="btnDeleteID" name="btnDelete"> Delete </button>
</div>
<br/>
<div>
<table>
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>ABC</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>XYZ</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>PQR</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>MLN</td>
</tr>
</tbody>
</table>
</div>
I must be doing something stupidly wrong, but I'm not seeing it. On my site, I attach the JQuery TableSorter to a table and hope to have some sorting done, but clicks have no effect. No sorting happens. It just remains as a static table.
Here's a simplified JSFiddle of the problem I'm having:
http://jsfiddle.net/96AEE/3/
It's a very simple table with javascript as follows:
<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
<thead>
<tr class="nav">
<td>
<input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
</td>
<td>Gift Cert</td>
<td>Note</td>
<td>Order #</td>
<td>Order Date</td>
<td>Amount</td>
<td>Redeemed</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"></td>
<td>ss1q</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td> Sale
</td>
<td>true</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="103" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_103" name="check_103" />
</td>
<td>443ss</td>
<td>(1d10t) Arizona Tea</td>
<td>-</td>
<td>-</td>
<td>$50.00</td>
<td>-</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="50" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_50" name="check_50" />
</td>
<td>199e</td>
<td>(#9000) Over</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
</td>
<td>F990</td>
<td>($09aa) Trouble</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$(".tablesorter").tablesorter();
});
Is there something obvious I'm missing?
This is due to your markup on the HTML table.
Within the thead element, you need to use th tags instead of td.
<thead>
<tr>
<th></th>
...
</tr>
</thead>
Working JSfiddle:
http://jsfiddle.net/bybFK/
Try changing your header row to use <th> tags instead of <td> tags.
You are definitely neglecting something, when creating the header of your table; your are using <td> instead of using <th>
you also do not need to assign the class tablesorter to your table
<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
<thead>
<tr class="nav">
<th>
<input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
</th>
<th>Gift Cert</th>
<th>Note</th>
<th>Order #</th>
<th>Order Date</th>
<th>Amount</th>
<th>Redeemed</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"></td>
<td>ss1q</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td> Sale
</td>
<td>true</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
</td>
<td>F990</td>
<td>($09aa) Trouble</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$("#gift_certificates").tablesorter();
});
http://tablesorter.com/docs/
I am using <tbody> to group table rows. My table looks like this:
<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/>
<br /><br />
<table id="indberetningstable" style="text-align: center; border: solid; align: center">
<thead>
<tr>
<th>Valgsted</th>
<th>Parti</th>
<th>Stemmer</th>
<th>Gem</th>
</tr>
</thead>
<tbody>
<tr>
<td>Idrætshuset</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>A - Socialdemokraterne</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
<tr>
<td></td>
<td>B - Det Radikale Venstre</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
<tr>
<td></td>
<td>C - Det Konservative Folkeparti</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>Strandvejsskolen</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>A - Socialdemokraterne</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
<tr>
<td></td>
<td>B - Det Radikale Venstre</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
<tr>
<td></td>
<td>C - Det Konservative Folkeparti</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
</tbody>
</table>
You can see an example here:
http://jsfiddle.net/zDA7n/
How is it possible to filter the table, so that when i write a search string in the "kwd_search" input field, it will hide everything but the <tbody> group that contains the search-text in it's first column (Valgsted) ?
Use the :contains selector (note: this is case-sensitive):
$('#kwd_search').on('change',function() {
var val = $.trim($(this).val());
$('#indberetningstable tbody').show();
if (val) {
$('#indberetningstable tbody:not(:contains("'+val+'"))').hide();
};
});
http://jsfiddle.net/mblase75/pEfSF/
For a case-insensitive version, you'll need to implement a custom version of the :contains selector.