show / hide table columns using jQuery - javascript

I have a table with five columns
column1 column2 column3 column4 column5
------- ------- ------- ------- -------
and I have some check boxes each one for one column when the first checkbox is checked
then I need to show the first column , if unchecked I need to hide first column. Like that
I need to do for all columns.
I found some answers but I did not find any solution .First time it is hiding then other
operations are not working on that.
$('#tableId td:nth-child(column number)').hide();
Please help me .Thanks in advance....

Here you go, full solution:
http://jsfiddle.net/vXBtP/
and updated here: http://jsfiddle.net/vXBtP/5/
<table>
<thead>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
</thead>
<tbody>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
<td>column 5</td>
</tr>
</tbody>
</table>
$(document).on('change', 'table thead input', function() {
var checked = $(this).is(":checked");
var index = $(this).parent().index();
if(checked) {
$('table tbody tr td').eq(index).show();
} else {
$('table tbody tr td').eq(index).hide();
}
});

Depending on the column # you wanna hide, use this stolen one liner:
$('td:nth-child(2)').hide();
if you use th
$('td:nth-child(2),th:nth-child(2)').hide();

If I got what you mean, you can make it real simple using tr th, tr td and nth-child selector. You can go based on index, but you'll need to add 1 as nth-child is not 0 indexed like elements in jQuery. And the JS doesn't really have to be drawn out. I should mention, placing tr before td:nth is very important in that you don't want "only the nth td". if that's the case, you won't hide every col on every row.
See WORKING jsFIDDLE of YOUR Example
FYI: If you want something "cleaner" looking, (like on the turbotax site) dont hide the td itself. Instead make it slightly wider than your largest piece of text, and place each piece of text inside p or div tags inside each cell. Then change you column selector to grab each cell's inner element and hide that instead.
See Example of this Alternate way here!
HTML
<table>
<thead>
<tr>
<th>
<input id="chk1" type="checkbox" />
</th>
<th>
<input id="chk1" type="checkbox" />
</th>
<th>
<input id="chk1" type="checkbox" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
</tbody>
</table>
<button>Reset</button>
JavaScript
$(function() {
// Selects your table by id, then the input checkboxes inside the table, you can
// alternate this call with classnames on your inputs if you're going to have
// more inputs than what's desired in call here.
// also note i'm using the "change" function and not "click", this simply
// provides easier control of what's going on with your inputs and makes
// later calls (like reset) a much easier call. Less thinking required
$("#tableId input[type=checkbox]").on("change", function(e) {
// First variable grabs the inputs PARENT index, this is the TH containing
// the input, thus the column you want hidden.
// The second is calling ALL TH's && TD's having that same index number
var id = $(this).parent().index()+1,
col = $("table tr th:nth-child("+id+"), table tr td:nth-child("+id+")");
// This simple inline "if" statement checks if the input is checked or now
// and shows the columns based on if it IS checked
$(this).is(":checked") ? col.show() : col.hide();
}).prop("checked", true).change(); // here i set all inputs to checked without having to write it in the above HTML
$("button").on("click", function(e) {
$("input[type=checkbox]").prop("checked", true).change();
});
})

You can get the header index of table and make the table header and td elements hidden. Something like this Suppose the index of table header is index = 2;
var index= tableHeaderIndex; // 2 here
$('th:nth-child('+index+')').hide();
$('td:nth-child('+index+')').hide();

Like this?
Lashed together quickly but should work.
<table id="TabToHide">
<tr>
<td class="Col1">Col 1</td>
<td class="Col2">Col 2</td>
<td class="Col3">Col 3</td>
<td class="Col4">Col 4</td>
<td class="Col5">Col 5</td>
</tr>
<tr>
<td class="Col1">Stuff 1</td>
<td class="Col2">Stuff 2</td>
<td class="Col3">Stuff 3</td>
<td class="Col4">Stuff 4</td>
<td class="Col5">Stuff 5</td>
</tr>
</table>
<br />
<table>
<tr>
<td><input name="Col1" type="checkbox" checked="checked" /></td>
<td><input name="Col2" type="checkbox" checked="checked" /></td>
<td><input name="Col3" type="checkbox" checked="checked" /></td>
<td><input name="Col4" type="checkbox" checked="checked" /></td>
<td><input name="Col5" type="checkbox" checked="checked" /></td>
</tr>
</table>
Javascript
$('input:checkbox').change(function(){
var ColToHide = $(this).attr("name");
if(this.checked){
$("td[class='" + ColToHide + "']").show();
}else{
$("td[class='" + ColToHide + "']").hide();
}
$('div#Debug').text("hiding " + ColToHide);
});

$(document).ready(function(){
$('table tr input:checkbox').change(function(){
var num = $(this).parents("th").index();
alert(num);
if($(this).is(":checked"))
{
$('table tbody tr td').eq(num).show();
}else
{
$('table tbody tr td').eq(num).hide();
}
});
});
JS FIDDLE LINK

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show and Hide Columns in a Table</title>
<link href="CSS/table.css" rel="stylesheet" />
<script src="scripts/jquery-1.11.1.min.js"></script>
<script>
$(function () {
var $chk = $("#grpChkBox input:checkbox");
var $tbl = $("#someTable");
$chk.prop('checked', true);
$chk.click(function () {
var colToHide = $tbl.find("." + $(this).attr("name"));
$(colToHide).toggle();
});
});
</script>
</head>
<body>
<h2>Show and Hide Columns in a Table</h2>
<p>Click on each Checkbox to hide corresponding Column</p>
<div id="grpChkBox">
<p><input type="checkbox" name="empid" /> Employee ID</p>
<p><input type="checkbox" name="fname" /> First Name</p>
<p><input type="checkbox" name="lname" /> Last Name</p>
<p><input type="checkbox" name="email" /> Email</p>
<p><input type="checkbox" name="phone" /> Phone</p>
</div>
<table id="someTable">
<thead>
<tr>
<th class="empid">EmpId</th>
<th class="fname">First Name</th>
<th class="lname">Last Name</th>
<th class="email">Email</th>
<th class="phone">Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td class="empid">E342</td>
<td class="fname">Bill</td>
<td class="lname">Evans</td>
<td class="email">Bill#devcurry.com</td>
<td class="phone">234-2345-2345</td>
</tr>
<tr>
<td class="empid">E343</td>
<td class="fname">Laura</td>
<td class="lname">Matt</td>
<td class="email">laura#devcurry.com</td>
<td class="phone">123-1234-5678</td>
</tr>
<tr>
<td class="empid">E344</td>
<td class="fname">Ram</td>
<td class="lname">Kumar</td>
<td class="email">ram#devcurry.com</td>
<td class="phone">345-3456-7890</td>
</tr>
</tbody>
</table>
</body>
</html>

You can add an "id" on your "th" element and simply call:
$('#yourId').hide();
here is the code I've utilized :
$(document).on('click', '.form-check-input', function(e){
var finition_checked = $('#finition_select[type="checkbox"]:checked').map(function(){
return $(this).prop('checked');
}).get();
var size_checked = $('#size_select[type="checkbox"]:checked').map(function(){
return $(this).prop('checked');
}).get();
if (finition_checked && size_checked.length === 0){
$('#price-container').hide();
$('.table-responsive').show();
$('#col_size').hide();
};
if (finition_checked.length === 0 && size_checked){
$('#price-container').hide();
$('.table-responsive').show();
$('#col_finition').hide();
};
if(size_checked && finition_checked){
$('#price-container').hide();
$('.table-responsive').show();
}
if(size_checked.length === 0 && finition_checked.length === 0){
$('#price-container').show();
$('.table-responsive').hide();
};
console.log(finition_checked, size_checked)
var unique_value = [];
var finition = [];
var size = [];
//more logic to come
});

Related

JQuery/Javascript Accessing a table with checkbox and retrieve the id of one specific <td>

Trying to :
Verify if a checkbox got selected.
2.Retrieve the value.
Save a value in an array.
So my array would have the following values: [1,21,111]
What him I missing, any guidance would be appreciated.
After I've figured this out... will go and create another array to store the automationName.
var SelectedItems = [];
$('.btn1').on('click', function() {
SelectedItems.length = 0;
$('#flowtable tbody tr').each(function() {
// if ($(this).is(':checked')) {
// if ($('.scheduleMe').is(':checked')) {
if ($('td .scheduleMe').is(':checked')) {
SelectedItems.push($(this).attr("id"));
}
});
console.log('Checked #' + SelectedItems.length);
console.log("list 2= " + SelectedItems);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h1>jQuery Crash Course</h1>
</header>
<div id="container">
<form id="form">
<table id="flowtable">
<tbody>
<tr class="selected">
<td id="1"></td>
<td class="automationName"> automation 1</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle1"></td>
</tr>
<tr>
<td id="21"></td>
<td class="automationName">automation 21</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle21"></td>
</tr>
<tr>
<td id="111"></td>
<td class="automationName">automation 111</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle111"></td>
</tr>
</tbody>
</table>
<button type="button" class="btn1">check list box</button>
</form>
</div>
Firstly, give the checkboxes a value which is the id they relate to, not the the sibling/parent td.
From there you can simplify your logic by using map() to build an array of the selected values only once, when the button is clicked, not having to maintain additions/deletions from the higher scoped array when a change is made.
Below is a working example. Note the use of label elements to make the clickable area of the checkboxes bigger.
$('.btn1').on('click', function() {
let selectedItems = $('.scheduleMe:checked').map((i, el) => el.value).get();
console.log(selectedItems);
// work with the array as required here, eg. pass to a fnuction for processing...
});
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<header>
<h1>jQuery Crash Course</h1>
</header>
<div id="container">
<form id="form">
<table id="flowtable">
<tbody>
<tr class="selected">
<td id="1"></td>
<td class="automationName"><label for="vehicle1">automation 1</label></td>
<td><input type="checkbox" value="1" class="scheduleMe" name="vehicle1" id="vehicle1" /></td>
</tr>
<tr>
<td id="21"></td>
<td class="automationName"><label for="vehicle21">automation 21</label></td>
<td><input type="checkbox" value="21" class="scheduleMe" name="vehicle21" id="vehicle21" /></td>
</tr>
<tr>
<td id="111"></td>
<td class="automationName"><label for="vehicle111">automation 111</label></td>
<td><input type="checkbox" value="111" class="scheduleMe" name="vehicle111" id="vehicle111" /></td>
</tr>
</tbody>
</table>
<button type="button" class="btn1">check list box</button>
</form>
</div>
If, for whatever reason, you can't change the HTML, then you can read the value from the td in map() like this:
let selectedItems = $('.scheduleMe:checked').map((i, el) => $(el).closest('tr').find('td[id]').prop('id')).get();
callMe() is a function that is handling all logic.
I am just checking if the checkBox is checked or not by using default property of input type checkbox checked.
If it is checked then we are pushing it in array, just making sure the item is not already there by using includes(). method.
var SelectedItems = [];
const tableRows = document.querySelectorAll("#flowtable tr");
const checkBoxes = document.querySelectorAll("#flowtable tr td > input");
const btn = document.querySelectorAll("#btn1");
function callMe() {
checkBoxes.forEach(checkBox => {
if (checkBox.checked) {
const currentParent = checkBox.parentElement.parentElement;
const getId = currentParent.querySelectorAll("td[id]")[0];
const val = getId.id;
if (SelectedItems.includes(val)) return;
SelectedItems.push(val);
}
})
if (SelectedItems === undefined || SelectedItems.length == 0) {
// array does not exist or is empty
console.log("No checkbox is checked.");
} else {
console.log(SelectedItems);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h1>jQuery Crash Course</h1>
</header>
<div id="container">
<form id="form">
<table id="flowtable">
<tbody>
<tr class="selected">
<td id="1"></td>
<td class="automationName"> automation 1</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle1"></td>
</tr>
<tr>
<td id="21"></td>
<td class="automationName">automation 21</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle21"></td>
</tr>
<tr>
<td id="111"></td>
<td class="automationName">automation 111</td>
<td><input type="checkbox" class="scheduleMe" name="vehicle111"></td>
</tr>
</tbody>
</table>
<button type="button" id="btn1" onclick="callMe();">check list box</button>
</form>
</div>

i have to call two button click events add and remove from jquery tabs,i'm using jquery forms

this is my code with add and remove buttons on a table inside a jquery tab, but when i call click event
it is not calling it.
<div id="tabs-2">
<form id="DSLform">
<table id="table-1" class="add1" border ="1"><!-- DSL -->
<thead>
<tr><td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td></tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th >
<th><input type="submit" class="add1" value="+"></th>
<!-- <th><button id="butVal1" type="button"> + </button></th> -->
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no"/> </td>
<td> <input type="text" name="shed"/> </td>
<td> <input type="text" name="schedule"/> </td>
<td><input type="text" name="programme"/> </td>
<td><button class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
and my javascript file is
(document).ready( function() {
$("#butVal1").click(function(){
var rowLen = $('tr.tabRow1').length;
if(rowLen>9)
{
alert("no of row is reached 10");
}
else
{
$("tr.tabRow1:first").clone(true).appendTo("#table-1>tbody");
$(".tabRow1:last").children("td").children("input").each(function(index, element)
{
$(element).val("");
});
}
});
$("tabs-1").on("click", "button.remove1", function(){
if($(this).parents("tr").siblings("tr.tabRow1").length > 0)
{
$(this).closest("tr.tabRow1").remove();
}
else
{
alert("you can't remove this record");
}
});
$("#tabs-1").on("click", ".add1, .remove1", function(){
$("td.sno1").each(function(index,element){
$(element).text(index + 1);
});
});
});
i have added my code above, i need this add and submit button to work from jquery tabs, also these textbox values need to be saved as records, how can i identify each row when i add or remove a row from table
In below code i have use .length to get the length of row and added 1 for displaying S.no count because count starts from 1. Then,instead of looping through all inputs i have just use .find("input").val("") to empty all inputs values and then finally use appendTo to append tr particular table only.
Then, when user will click on remove button i have get the id of table which will be unique in all tabs and then i have passed this value to the function resetValues to reset the S.no column count onces any row gets removed. So , using table id i have loop through tbody tr and have reset the counts .
Demo Code :
$(document).ready(function() {
$(function() {
$("#tabs").tabs();
});
//click on add
$(".add").click(function() {
var apendTo = $(this).closest("table").find("tbody")
//get length of trs
var rowLen = $(this).closest("table").find("tbody tr").length + 1;
if (rowLen > 9) {
alert("no of row is reached 10");
} else {
//get cloned of tr
var cloned = $(this).closest("table").find("tbody tr:first").clone(true);
//set s.no
cloned.find("td:eq(0)").text(rowLen);
cloned.find("input").val(""); //empty inputs
cloned.appendTo(apendTo) //appends
}
});
$(document).on("click", "button.remove1", function() {
var table_id = $(this).closest("table").attr("id") //get tablename
if ($(this).parents("tr").siblings("tr.tabRow1").length > 0) {
$(this).closest("tr.tabRow1").remove();
resetValues(table_id); //call to reset values
} else {
alert("you can't remove this record");
}
});
function resetValues(el) {
var counter = 2; //initialze to 2 because 1 is fixed
//looping through tr not first one
$("#" + el).find("tbody tr:not(:first)").each(function() {
//find .sno1 class replace its counter
$(this).find('.sno1').text(counter);
counter++;
})
}
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>FIRST</li>
<li>SECOND</li>
</ul>
<div id="tabs-1">
<form id="DSLform">
<table id="table-1" class="add1" border="1">
<!-- DSL -->
<thead>
<tr>
<td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td>
</tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th>
<th><input type="button" class="add" value="+"></th>
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no" /> </td>
<td> <input type="text" name="shed" /> </td>
<td> <input type="text" name="schedule" /> </td>
<td><input type="text" name="programme" /> </td>
<td><button type="button" class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
</form>
</div>
<div id="tabs-2">
<form id="DSLform">
<table id="table-2" class="add1" border="1">
<!-- DSL -->
<thead>
<tr>
<td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td>
</tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th>
<th><input type="button" class="add" value="+"></th>
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no" /> </td>
<td> <input type="text" name="shed" /> </td>
<td> <input type="text" name="schedule" /> </td>
<td><input type="text" name="programme" /> </td>
<td><button type="button" class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
Note : Above code will work on any table only you need to make sure id is unique for all tables .

Having trouble setting a checkbox using jquery

I have a table whose rows are dynamically generated. The general structure is as follows:
<table id="table1">
<thead></thead>
<tbody>
<tr>
<td>Cell value 1</td>
<td>Cell value 2</td>
<td>Cell value 3</td>
<td>
<input type="checkbox" id="checkbox1" value="value1>
<input type="checkbox" id="checkbox2" value="value2>
</td>
</tr>
<tr>
<td>Cell value 4</td>
<td>Cell value 5</td>
<td>Cell value 6</td>
<td>
<input type="checkbox" id="checkbox1" value="value1>
<input type="checkbox" id="checkbox2" value="value2>
</td>
</tr>
</tbody>
</table>
Based on the value(s) in one of the (the third one to be precise), I am trying to check/uncheck the checkboxes. My script for the same is:
$('#table1 tbody tr').each(function(){
var cellValue = $(this).find("td").text();
if (cellValue=='someValue'){
$('#checkbox1).prop('checked',true);
}
});
The issue i'm facing is that, since the rows are dynamically generated so during that iteration, I can't get that specific set of checkboxes. Like the example above, during first iteration i'm setting checkbox1 and that's working but during second iteration, i'm trying to set checkbox2 in the second row but the checkbox2 in the first row is getting set. Any help/pointers will be highly appreciated. Thanks.
You get the third td by using .eq(2) and then to target the correct checkbox you can use:
$('.checkbox1', this)... //OR
$(this).find('.checkbox1')....
Depending on what your conditional statements are they may be combined into one by using the array .includes() method as in the demo below:
$('#table1 tbody tr').each(function() {
var cellValue = $(this).find("td").eq(2).text();
console.log(cellValue);
if ( ['Cell value 3','Cell value 6'].includes(cellValue) ){
$('.checkbox1', this).prop('checked',true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1">
<thead></thead>
<tbody>
<tr>
<td>Cell value 1</td>
<td>Cell value 2</td>
<td>Cell value 3</td>
<td>
<input type="checkbox" class="checkbox1" value="value1">
<input type="checkbox" class="checkbox2" value="value2">
</td>
</tr>
<tr>
<td>Cell value 4</td>
<td>Cell value 5</td>
<td>Cell value 6</td>
<td>
<input type="checkbox" class="checkbox1" value="value1">
<input type="checkbox" class="checkbox2" value="value2">
</td>
</tr>
</tbody>
</table>
You can't generate element with the same id. It will select the first element with that id when the function first executed. Use class="" instead.
also if you wanna store each checked value, check: HTML Element Array, name="something[]" or name="something"?

How to get the position of the checked checkbox in a table

I have a table with bunch of checkboxes in each row. How can I find position of the checked box e.g. 1A or 1B when both or one of the checkboxes is checked in first row. The page I am trying to modify, dynamically makes the table based on two factors for the rows and columns. SO I just need to grab the rowname and colname in order to program further. e.g. 10(A) if the name of first row was '10'.
<table id="mytable">
<tr>
<td> </td>
<td align="center"> A </td>
<td align="center"> B </td>
</tr>
<tr>
<td> 1 </td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td> 2</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
</table>
<tr> <button id="save">Click</button> </tr>
This will get the column and row of a checked input, and it gets the column letter and row number through calls to document.querySelector, using CSS3 first-child and nth-child selectors based on the column and row:
document.getElementById('mytable').addEventListener('click', function(e) {
if(e.target.tagName === 'INPUT') {
var td= e.target.parentNode, //the input's td parent
tr= td.parentNode, //the td's tr parent
col= td.cellIndex, //the input's column
row= tr.rowIndex, //the input's row
header= document.querySelector('#mytable tr:first-child td:nth-child('+(col+1)+')').textContent,
number= document.querySelector('#mytable tr:nth-child('+(row+1)+') td:first-child').textContent;
document.getElementById('output').textContent= number+header;
}
});
<table id="mytable">
<tr>
<td></td>
<td align="center">A</td>
<td align="center">B</td>
</tr>
<tr>
<td>1</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
<div id="output"></div>
try this # plain javascript:
var checkboxes = [];
for(var i =0; i<document.getElementsByTagName("input").length;i++) {
if(document.getElementsByTagName("input")[i].checked) {checkboxes.push(i)}
}
checkboxes is an array of checked checkboxes - e.g. [0,2] if the first and the 3rd checkboxes are checked
or like this:
https://jsfiddle.net/zLy90w40/1/
function getCheckBox(){
var oneA = document.getElementById('1a');
var oneB = document.getElementById('1b');
var twoA = document.getElementById('2a');
var twoB = document.getElementById('2b');
if (oneA.checked){
alert("1 A was checked") ;
}
if(oneB.checked){
alert("1 B was checked") ;
}
if(twoA.checked){
alert("2 A was checked") ;
}
if(twoB.checked){
alert("2 B was checked") ;
}
}

Find the value of id column if checkbox is checked on the basis of column name id

I have to find the value of id column whose check box is checked in same row on the basis of column name because id column position is not fixed. It can be first,last or middle in the table. I have applied the following code:
<table id="rowclick2" border="1">
<tr>
<th>Select</th>
<th>Des</th>
<th>ID</th>
</tr>
<tr>
<td>
<input type="checkbox" name="vehicle" value="Bike">
</td>
<td>col 2, row 1</td>
<td>col 3, row 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vehicle" value="Car"> </td>
<td>col 2, row 2</td>
<td>col 3, row 2</td>
</tr>
</table>
My jquery is:
$("input[name='vehicle']").click(function() {
alert("djb");
if ($(this).is(':checked')) {
alert("dj");
if ($(this).closest('table').next('tr').find('th:contains(Jan 3)') == 'true') {
alert("bhh");
} else {
alert("cbjhj");
}
}
});
Please help to find the id value whose checkbox is checked. I am new to jquery, javascript.
I'd suggest the following approach:
// binding a change event-handler to <input type="checkbox" /> elements:
$('input[type=checkbox]').change(function() {
// assuming you want this to run only when the checkbox is checked:
if (this.checked) {
// find the <th> elements:
var ID = $('th').filter(function() {
// find those <th> elements whose trimmed-text is exactly 'ID':
return $.trim($(this).text()) === 'ID';
// get the cellIndex property of that element (or the first matched element):
}).prop('cellIndex'),
// find the closest <tr> element from the checked <input />:
IDVal = $(this).closest('tr')
// find the descendant <td> elements:
.find('td')
// find the <td> with the same cellIndex as the <th>
.eq(ID)
// retrieve the text:
.text();
console.log(IDVal);
}
});
$('input[type=checkbox]').change(function() {
if (this.checked) {
var ID = $('th').filter(function() {
return $.trim($(this).text()) === 'ID';
}).prop('cellIndex'),
IDVal = $(this).closest('tr').find('td').eq(ID).text();
console.log(IDVal);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="rowclick2" border="1">
<tr>
<th>Select</th>
<th>Des</th>
<th>ID</th>
</tr>
<tr>
<td>
<input type="checkbox" name="vehicle" value="Bike">
</td>
<td>col 2, row 1</td>
<td>col 3, row 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vehicle" value="Car">
</td>
<td>col 2, row 2</td>
<td>col 3, row 2</td>
</tr>
</table>
If, however, you use a class-name to identify which cells contains the 'id' associated value, such as <td class="id"></td>, this all becomes much simpler:
$('input[type=checkbox]').on('change', function() {
if (this.checked) {
// find the closest <tr> element from the :checked <input />:
var idValue = $(this).closest('tr')
// find the element with the class of 'id':
.find('.id')
// retrieve the text of that element:
.text();
console.log(idValue);
}
});
$('input[type=checkbox]').on('change', function() {
if (this.checked) {
var idValue = $(this).closest('tr').find('.id').text();
console.log(idValue);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="rowclick2" border="1">
<tr>
<th>Select</th>
<th>Des</th>
<th class="id">ID</th>
</tr>
<tr>
<td>
<input type="checkbox" name="vehicle" value="Bike">
</td>
<td>col 2, row 1</td>
<td class="id">col 3, row 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="vehicle" value="Car">
</td>
<td>col 2, row 2</td>
<td class="id">col 3, row 2</td>
</tr>
</table>
References:
JavaScript:
cellIndex.
jQuery:
closest().
eq().
filter().
find().
jQuery.trim().
on().
prop().
I hope this helps. Please see demo.
based on what I understand from this, Please help to find the id value whose checkbox is checked.
$(document).ready(function(){
$(":checkbox").click(function(){
alert( $(this).val() );
});
});
http://jsfiddle.net/silkherb/tx2asmg6/2/
Add IDs to the checkboxes id="first" and id="second" to grab the elements:
<tr>
<td><input type="checkbox" name="vehicle" value="Bike" id="first"></td>
<td>col 2, row 1</td>
<td>col 3, row 1</td>
</tr>`enter code here`
<tr>
<td><input type="checkbox" name="vehicle" value="Car" id="second"> </td>
<td>col 2, row 2</td>
<td>col 3, row 2</td>
</tr>
Afterwards, you can use a simple javascript. .checked checks whether the checkbox is marked.
if(document.getElementById("first").checked == true){
console.log("do something here 1");
}
if(document.getElementById("second").checked == true){
console.log("do something here 2");
}

Categories