First I create a table with n number of rows and each one of them contains a checkbox. I need to get all the ids from all the row checked.
<body>
<table border='1' style='width:100%'>
<tr id='1'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='2'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='3'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='4'><td>'hi'</td><td><input type='checkbox' /></td></tr>
</table>
<button id='test'>Get Checked</button>
</body>
This is what I got so far:
<script>
$(document).ready(function() {
$('#test').click(function(){
var getID = $(':checkbox:checked').closest('tr').attr('id');
alert(getID);
});
});
</script>
But this only gives me one id. If I select many rows I only get the first selected id. Also I need to store all the ids selected in an array for later use.
User jQuery's each function for this.
$(':checkbox:checked').each(function( index ) {
var closestTr = $(this).closest('tr').attr('id');
alert(closestTr);
});
In jQuery, use selector defaults to the first. so , we should use each get all selector element.
<script>
$(document).ready(function() {
$('#test').click(function(){
var arrId = [];
$(':checkbox:checked').each(function(){
var id = $(this).closest('tr').attr('id');
arrId.push(id);
})
console.log(arrId);
});
});
</script>
var getID = $(':checkbox:checked').closest('tr').attr('id');
Should be:
var getID = $('.checkbox:checked').closest('tr').attr('id');
Try something like this, demo in fiddle. Make sure adding open td , before each input checkbox
JS
$('#test').click(function(){
var ids = $(':checkbox:checked').map(function() {
var id = $(this).closest('tr').prop('id');
alert(id);
return id;
}).get();
alert(ids);
});
HTML
<table border='1' style='width:100%'>
<tr id='1'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='2'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='3'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='4'><td>'hi'</td><td><input type='checkbox' /></td></tr>
</table>
<button id='test'>Get Checked</button>
Put and id on your table:
<table id="myTab" border='1' style='width:100%'>
To avoid getting other checkboxes in the page, select the checkboxes from within the table like:
var ids = [];
$('#mytab :checkbox:checked').each(function( index ) {
var closestTr = $(this).closest('tr').attr('id');
ids.push(closestTr);
});
alert(ids);
Related
This is my table row within the tbody of my table. I get dropdown value, text value but I can't get selected row value. My row value returns "undefined".
$(document).on("click", "#skorKartDegerle", function() {
$("#modal_evaluation").modal("show");
});
$(document).on("click", "#btnKaydet", function() {
var arrList = [];
var isEmptyAnswer = false;
$("#evaluationTable > tbody > tr").each(function() {
var line = $(this).find(".answerLine").val();
var ddlVal = $(this).find(".answerddl").val();
var txtVal = $(this).find(".answertxt").val();
var obj = '{"line":"' + line + '","ddlVal":"' + ddlVal + '","txtVal":"' + txtVal + '"}';
arrList.push(obj);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="answerLine" value="2">
<td>FR002</td>
<td>Koton Mağazacılık</td>
<td>1800</td>
<td>A</td>
<td>Kabul</td>
<td class="select" value="0">
<select class="answerddl">
<option value="1">Kabul</option>
<option value="2">Ret</option>
</select>
</td>
<td><input type="text" class="answertxt"></td>
</tr>
</tbody>
</table>
Part of the issue is because tr elements do not have a value attribute. To do what you require you could use a data attribute instead, to store custom metadata on the element. The other part is that this is a reference to the tr element. You're then calling find() on the element you're looking to target, so it will not be found as that method looks for descendants only.
In addition it's worth noting that you can make the logic more succinct by using map() to build the array instead of explicitly looping with each() and also that it would be better practice to store objects in the array and only JSON encode it before transferring via AJAX.
$(document).on("click", "#btnKaydet", function() {
var isEmptyAnswer = false;
let arrList = $("#evaluationTable > tbody > tr").map((i, tr) => {
let $tr = $(tr);
return {
line: $tr.data('value'),
ddlVal: $tr.find(".answerddl").val(),
txtVal: $tr.find(".answertxt").val()
}
}).get();
console.log(arrList);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="evaluationTable">
<tbody>
<tr class="answerLine" data-value="2">
<td>FR002</td>
<td>Koton Mağazacılık</td>
<td>1800</td>
<td>A</td>
<td>Kabul</td>
<td class="select" value="0">
<select class="answerddl">
<option value="1">Kabul</option>
<option value="2">Ret</option>
</select>
</td>
<td><input type="text" class="answertxt"></td>
</tr>
</tbody>
</table>
<button id="btnKaydet">Click me</button>
What I am trying to do is, to be able to select rows which do not have a specific class name, and push them into a new array. I know that there is :not() Selector and .not() method to help me with this.
But the big problem is that I can't use :not() Selector with $(this) and tried using .not() method but couldn't get anywhere.
Here is my code:
$(document).ready(function(){
$('#getRows').on('click', function() {
var temp = new Array();
$('#tbl tr').each(function(){
var clsFree = $(this).not(document.getElementsByClassName("testCls"));
temp.push(clsFree);
});
console.log(temp.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="getRows">Get rows without class</button>
<table id="tbl">
<tr class="testCls"><td>Test1</td></tr>
<tr class="testCls"><td>Test2</td></tr>
<tr><td>Test3</td></tr>
<tr class="testCls"><td>Test4</td></tr>
<tr class="testCls"><td>Test5</td></tr>
<tr class="testCls"><td>Test6</td></tr>
<tr><td>Test7</td></tr>
<tr class="testCls"><td>Test8</td></tr>
<tr class="testCls"><td>Test9</td></tr>
</table>
Please note that the main goal here is to find rows that don't have a class name with testCls and push them into a new array. Any other method is also appreciated.
Try :not() as part of the selector in .each iterator to iterate over only with the selected rows in the selector:
$('#tbl tr:not(.testCls)').each(function(){
Working Code Snippet:
$(document).ready(function(){
$('#getRows').on('click', function() {
var temp = new Array();
$('#tbl tr:not(.testCls)').each(function(){
var clsFree = this;
temp.push(clsFree);
});
console.log(temp.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="getRows">Get rows without class</button>
<table id="tbl">
<tr class="testCls"><td>Test1</td></tr>
<tr class="testCls"><td>Test2</td></tr>
<tr><td>Test3</td></tr>
<tr class="testCls"><td>Test4</td></tr>
<tr class="testCls"><td>Test5</td></tr>
<tr class="testCls"><td>Test6</td></tr>
<tr><td>Test7</td></tr>
<tr class="testCls"><td>Test8</td></tr>
<tr class="testCls"><td>Test9</td></tr>
</table>
two things:
this is the syntax for the .not: $(this).not('.testCls');
clsFree is going to be a jQuery, and jQuerys still exist even if there are no elements in them. You have to check the length to see if there are any elements.
also as an aside, you might end up being happier with something like this:
$('#tbl tr:not(.testCls)').each...
$(document).ready(function() {
$('#getRows').on('click', function() {
var temp = new Array();
$('#tbl tr').each(function() {
clsFree = $(this).not('.testCls');
if (clsFree.length > 0)
temp.push(clsFree);
});
console.log(temp.length);
});
console.log('other method', $('#tbl tr:not(.testCls)').length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="getRows">Get rows without class</button>
<table id="tbl">
<tr class="testCls"><td>Test1</td></tr>
<tr class="testCls"><td>Test2</td></tr>
<tr><td>Test3</td></tr>
<tr class="testCls"><td>Test4</td></tr>
<tr class="testCls"><td>Test5</td></tr>
<tr class="testCls"><td>Test6</td></tr>
<tr><td>Test7</td></tr>
<tr class="testCls"><td>Test8</td></tr>
<tr class="testCls"<td>Test9</tr></tr>
</table>
I want to copy the first row into the same table as many times as you type in, in a textbox.
<table id='table1'>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr id="row">
<td>1</td><td>2</td><td>3</td>
</tr>
<table>
<input id="Button1" type="button" value="button" onclick="showRow()"/>
<input id="Text1" type="text" />
<script>
function showRow() {
var header = Array();
$("#row").each(function (i) {
header[i] = $(this).text();
})
alert(header);
}
</script>
So I have created an array of the first row that alerts when you click the button.
An example of my question:
If i type 5 in the textbox and click on the button the table should look like this:
ABC
123
123
123
123
123
Is this possible?
I've made the class row rather than the id, so that we can target it (clone() would prevent duplicate ids anyway.)
You can just store the row as a jQuery object and then use a for() loop to clone that object and append it. Use the value entered in the textbox within your loop:
var $tbl = $('#table1'), origRow = $tbl.find('.row').first();
$('#Button1').on('click', function(){
var num = $('#Text1').val();
$tbl.find('.row').remove();
for(i=0; i<num; i++){
var newRow = origRow.clone();
$tbl.append(newRow);
}
});
JSFiddle
I wasn't sure whether you would want the table to empty each time or just add the rows on to the end. If you want the rows to be added to the end, just remove the $tbl.find('.row').remove(); line.
Try thisLink
<table id='table1'>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr class="row">
<td>1</td><td>2</td><td>3</td>
</tr>
<table>
<input id="Button1" type="button" value="button" onclick="showRow()"/>
<input id="Text1" type="number" />
$(document).ready(function () {
$('#Button1').click(function(){
var num = $('input[id="Text1"]').val();
alert(num);
for(var i=0;i<num;i++){
$('table[id="table1"]').append(' <tr class="row"><td>1</td><td>2</td><td>3</td></tr>');
}
});
});
Ofc it is, just parse the textbox val() or value as int and to a for() loop to that number
Using jquery there is a lot of ways to do it. Look at these jQuery functions :
clone()
appendTo()
insertAfter()
You can try this one:
Logic is simple: Get the count from textbox, create row count no of times and append that row after last row in table. $('#row').html() will give inner element of first row.
<script>
function showRow() {
var i, num = $('#Text1').val();
for(i=0; i<num; i++){
$('#table1 > tbody:last').append('<tr id=row'+i+1+'>'+$('#row').html()+'</tr>');
}
}
</script>
DEMO Link
LIVE DEMO
Try this:
Change your row to class.
HTML:
<table id='table1'>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr class="row">
<td>1</td><td>2</td><td>3</td>
</tr>
<table>
<input id="Button1" type="button" value="button" />
<input id="Text1" type="text" />
JQUERY:
$('#Button1').on('click',function(e) {
limit = $("#Text1").val();
for(i=0;i<parseInt(limit);i++) {
strText = $(".row").first().clone();
strText.appendTo("#table1");
}
});
I have a dynamic list of dates. I want to create a checkbox for each unique date, and then list all dates in a table row format below. The goal is when a checkbox is checked/unchecked, any rows with a class the same as the checkbox value will hide/show.
Any help is appreciated.
$('input[type = checkbox]').change(function () {
var self = this;
$(self).closest('table').find('tbody tr').filter('.' + self.value).toggle(self.checked);
});
<div class="widget">
<div class="rowElem noborder">
<div class="formRight">
<label>
<input type="checkbox" class="show" value="2013-11-15" checked />2013-11-15</label>
</div>
<div class="formRight">
<label>
<input type="checkbox" class="show" value="2013-11-17" checked />2013-11-17</label>
</div>
<div class="formRight">
<label>
<input type="checkbox" class="show" value="2013-11-20" checked /> 2013-11-20</label>
</div>
</div>
</div>
<table>
<tbody>
<tr class="2013-11-15">
<td>2013-11-15</td>
</tr>
<tr class="2013-11-15">
<td>2013-11-15</td>
</tr>
<tr class="2013-11-20">
<td>2013-11-20</td>
</tr>
<tr class="2013-11-15">
<td>2013-11-15</td>
</tr>
<tr class="2013-11-17">
<td>2013-11-17</td>
</tr>
<tr class="2013-11-20">
<td>2013-11-20</td>
</tr>
</tbody>
</table>
Fiddle: http://jsfiddle.net/fEM8X/9/
Closest will select the ancestor or self (first one that matches the selector), but you want to select the sibling of ancestor (.widget) of the checked check box. So Try:
$('input[type = checkbox]').change(function () {
var self = this;
$(self).closest('.widget').next('table').find('tbody tr').filter('.' + self.value).toggle(self.checked);
});
Demo
But in this case you can just do the following since you use the same classes for the targets:
$('.' + this.value).toggle(self.checked);
Demo
Use this.value of the checked box and use it as class to toggle. You could simply do this.
$('input[type = checkbox]').change(function () {
var myclass = this.value;
$('.' + myclass).toggle();
});
jsFIDDLE DEMO
you can just add a css to tr, see this DEMO
$('input[type="checkbox"]').change(function () {
var self = this;
$("table tr."+$(this).val()).css({display: self.checked?"block":"none"});
});
I updated your fiddle
Basically, your selectors were not correct:
$('input[type = checkbox]').change(function () {
var valu = $(this).val();
var ischecked = $(this).is(":checked");
if( ischecked ){
$('.' + valu).show();
}else{
$('.' + valu).hide();
}
});
I dynamically created a table with three columns.
<tr>
<td>1</td>
<td>SegName</td>
<td><input type='text' /></td>
</tr>
I'm trying to write a function that goes through each row and grabs the value in that will be in the textbox.
Javascript:
$("#codeSegmentBody").children().eq(x).children().eq(2).val();
The code brings brings up undefined when I do val(), but if I do html it'll grab the html of the textbox.
How can I get this to bring me the value?
<table id="test">
<tr>
<td>
<input type="text" value="123">
</td>
</tr>
<tr>
<td>
<input type="text" value="abc">
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$("#test").find(":input[type=text]").each(function(){
alert( $(this).val() );
});
});
</script>
Here is a fiddle that will get you there:
http://jsfiddle.net/uS8AK/
Assuming #codeSegmentBody is the name of your table, try this:
$("#codeSegmentBody td input").each(function() {
var inputValue = $(this).val();
alert(inputValue);
});
Example fiddle
$("#codeSegmentBody tr input[type='text']").each(function(){
alert($(this).val());
})
Try this
$("#codeSegmentBody tr").each(function() {
alert($(this).find("input").val());
});
You are referencing the containing <td> not the input. Try:
$("#codeSegmentBody").children().eq(x).find(":text").val();
var str = "";
$("#codeSegmentBody .third-column input").each(function()
{
str += this.value;
});
alert(str);
Not easier
$("table tr td input").val();
?
BTW. You don't have any value in this input anyway.