I have a table and if I click a button i want to take the value from charge_outstanding_NUM and set charge_receipt_NUM to it. I need a reusable script because I will not know how many rows will get posted through.
<table>
<thead>
<tr>
<th>ID</th>
<th>Value</th>
<th>Outstanding</th>
<th>Reciept</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>150.00</td>
<td id="charge_outstanding_1">150.00</td>
<td><input type="text" name="charge_receipt_1" id="charge_receipt_1" value=""></td>
</tr>
<tr>
<td>002</td>
<td>10.00</td>
<td id="charge_outstanding_2">10.00</td>
<td><input type="text" name="charge_receipt_2" id="charge_receipt_2" value=""></td>
</tr>
<tr>
<td>003</td>
<td>250.00</td>
<td id="charge_outstanding_3">250.00</td>
<td><input type="text" name="charge_receipt_3" id="charge_receipt_3" value=""></td>
</tr>
</tbody>
</table>
My jquery isn't working and I am not sure why. I click the button then loop through each col that starts with 'charge_outstanding_' then take the value and assign it to the closest input which is within the same row.
$('#pay_in_full').click(function(){
$("[id^=charge_outstanding_]").each(function(){
charge = $(this).val();
$(this).closest('input').val(charge);
});
});
working JSfiddle: http://jsfiddle.net/F5NvW/2/
Issue with your code: charge = $(this).val(); you are finding td which has no value, you need .html() for this
$(document).on("click", "#pay_in_full", function() {
$("[id^=charge_outstanding_]").each(function(){
var charge = $(this).html();
$(this).next().find('input').val(charge);
});
});
Suggestion: use class name with each <td> like this
Jsfiddle: http://jsfiddle.net/F5NvW/
Note: less error prone..
$(document).on("click", "#pay_in_full", function() {
$(".outstanding").each(function(){
var charge = $(this).html();
$(this).next().find('.paidAmount').val(charge);
});
});
.Closest will search for the ancestor elements, In your case the target input is the children of the next sibling of the selected element. So you have to use .find() or .children() to select that.
Try,
$('#pay_in_full').click(function(){
$("[id^='charge_outstanding_']").each(function(){
charge = parseInt($(this).text());
$(this).next().find('input').val(charge);
});
});
Additionally, You are selecting a td element, so you have to use .text() to get its text not .val()
DEMO
Related
I'm trying to do the following: I have a table populated with data from the DB. Apart from that, I have an input where you can write something and a button that will filter, only showing the lines that have that string. This is working now!
The thing is, the input should only allow you to filter by foo.name/foo.code (two propertys of my entity).
I'm adding the code I have in case anyone can guide me out, I've tried several things but this are my first experiences with JQuery while I have a strict story-delivery time. Thanks everyone!
<tbody>
<c:forEach var="foo" items="${foo}">
<tr id = "fooInformation" class="mtrow">
<th id="fooName" scope="row">${foo.name}</th>
<td id="fooCode" class="left-align-text">${foo.code}</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
</c:forEach>
</tbody>
$("#search").click(function () { -> button id
var value = $("#fooRegionSearch").val(); -> value of the input
var rows = $("#fooRegionTable").find("tr"); -> table id
rows.hide();
rows.filter(":contains('" + value + "')").show();
});
To start with, your HTML is invalid - there cannot be elemenets with duplicate IDs in HTML. Use classes instead of IDs.
Then, you need to identify which TRs pass the test. .filter can accept a callback, so pass it a function which, given a TR, selects its fooName and fooCode children which contain the value using the :contains jQuery selector:
$("#search").click(function() {
var value = $("#fooRegionSearch").val();
var rows = $("#fooRegionTable").find("tr");
rows.hide();
rows.filter(
(_, row) => $(row).find('.fooName, .fooCode').filter(`:contains('${value}')`).length
).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="fooRegionTable">
<tr id="fooInformation" class="mtrow">
<th class="fooName" scope="row">name1</th>
<td class="fooCode" class="left-align-text">code1</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
<tr id="fooInformation" class="mtrow">
<th class="fooName" scope="row">name2</th>
<td class="fooCode" class="left-align-text">code2</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
</table>
<button id="search">click</button><input id="fooRegionSearch" />
I have a little complicated situation here, one which, despite my serious efforts, am unable to find reasonable solution of. So I am placing it here. I have javascript, jQuery and HTML with following details:
var lastDateIndex ='';
function datecheck(){
lastDateIndex = $('td, input[name=date]:not(:empty):last').prev('[name=index]');
alert(lastDateIndex.html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table1'>
<tr id='row1'>
<th>Index</th>
<th>Date</th>
<th>Description</th>
<th>Payment</th>
<th>Balance</th>
</tr>
<tr id='row2' name='row'>
<td name='index'>1</td>
<td name='rowdate'><input type="date" title="date1" name="date" onblur="datecheck();"></td>
<td name='description'><input title="description1" name="description"></td>
<td name='description'><input title="paymentpay1" name="paymentpay"></td>
<td name='description'><input title="balance1" name="balance"></td>
</tr>
<tr id='row3' name='row'>
<td name='index'>2</td>
<td name='rowdate'><input type="date" title="date2" name="date" onblur="datecheck();"></td>
<td name='description'><input title="description2" name="description"></td>
<td name='description'><input title="paymentpay2" name="paymentpay"></td>
<td name='description'><input title="balance2" name="balance"></td>
</tr>
<tr id='row4' name='row'>
<td name='index'>3</td>
<td name='rowdate'><input type="date" title="date3" name="date" onblur="datecheck();"></td>
<td name='description'><input title="description3" name="description"></td>
<td name='description'><input title="paymentpay3" name="paymentpay"></td>
<td name='description'><input title="balance3" name="balance"></td>
</tr>
</table>
This table has numerous input fields and all of them are to be filled by user as per his/hers need. I need to select the td with name='index' inside of last tr where td with input[name='date'] is not null. In other words, if the user has entered date details in input[name='date'] and [title='date1'] inside tr with id='row2' and has left all remaining rows to be blank, I want to select the html inside of name='index' inside tr with id='row2'.
The function I have written above only alerts 1, even if all the rows except the last one are filled. How can I acheive the answer of the html of name='index' of the last tr with empty name='date'?
As far as I know it can't be done using only selectors, so consider the following:
In case the user writes a value in input[name='date'], update its parent TD and add a class/data-* attribute (for instance: addClass('date-isnt-null')).
Use the following selector:
$('.tr:last-child td.date-isnt-null[name="index"]');
If whenever you call your function you want to output all the rows with a date entered, you can use:
function datecheck() {
$('input[name=date]').each(function(i, el) {
if ($(el).val()) {
console.log($(el).parents('tr').find('[name=index]').html());
}
});
}
(not sure to understand the last index bit).
As for Ofir Baruch suggestion, here is a way to go:
$(function() {
$('input[name=date]').bind('blur', function() {
if ($(this).val()){
$(this).parent('td').addClass("dirty");
} else {
// in case the user removes the date
$(this).parent('td').removeClass("dirty");
}
});
});
function datecheck() {
var html = $('.tr:last-child td.dirty[name="index"]').html();
console.log(html);
}
On input date blur and if the user entered a date, we add the class dirty to its parent.
I have a table with several <tr>s and each one has several <td>s. The content of these columns can be another html element (for example a textbox) or just text.
My question: how I can get the rest of the siblings of one clicked element inside this column? I mean, how I can know to which <tr> this element belongs, to <tr> #3 or <tr> #5?I don't have a index per <tr> to control
Example:
If I click the textbox of column #1 in row #5, I want that the content of column #2 in row #5 change. I don't know how to do it because my <tr> doesn't have an index.
Using jQuery, add this to the event handler. This will provide you with a collection of table cells:
var columns = $(this).closest('tr').children();
// .eq() is 0-based, so this would retrieve the fourth column
columns.eq(3);
You can find the index of a row using the index() function.
$('input').click(function(){
var index = $(this).parents('tr').index();
alert('you click an input on row #' + index);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td><input type="text"></td>
<td></td>
</tr>
</table>
Use closest to get the parent TR element.
$('your_element').click(function(){
var tr = $(this).closest('tr');
var element1 = $(tr).find('element_to_find');
});
You can also use the :eq operator to find the td.
$('your_element').click(function() {
var tr = $(this).closest('tr');
var col3 = $("td:eq(2)", tr);
}
I am reading tables tr id with closest attribute on change but I keep getting wrong values and do not know how to fix.
If I choose the firts the "lower"(16) checkbox, I get the tr id ok and after that the upper one everythins peachy. Now if I do it the other way around I keep only getting the value of the "top"(17) one. My guess is that it is because the class name is the same, but I´m not sure and I can not influence the class name, since it is generated by Datatables.
Could someone take a peek at jquery and tell me what I´m doing wrong.
Thank you for your help.
var a = $(".report_report").change(function() {
var closestTr = $('.report_report:checkbox:checked').closest('tr').attr('id');
alert(closestTr);
This the basic table concept
<table class="something">
<tr id = "17">
<td>
<input class="report_report" type = "checkbox">
</td>
</tr>
<tr id = "16">
<td>
<input class="report_report" type = "checkbox">
</td>
</tr>
</table>
try
HTML
<table class="something">
<tr id="17">
<td>
<input class="report_report" type="checkbox"/>
</td>
</tr>
<tr id="16">
<td>
<input class="report_report" type="checkbox"/>
</td>
</tr>
</table>
JS
$(".report_report").change(function() {
alert($(this).closest("tr").attr("id"));
});
DEMO
IF you want all selected check box with parent tr id
$(".report_report").change(function () {
var cheked = $(".report_report").filter(function () {
return this.checked;
}).closest("tr").get();
console.log(cheked);
});
NOTE: you html is invalid tr is not closed
is it possible to change the innerhtml of all the td when it has the input inside, i mean to take the input's value and apply it to it's td innerhtml, for example, here's the table and its input inside:
<table>
<tr>
<td><input value="test" /></td>
<td>123</td>
</tr>
</table>
to change it smth into this:
<table>
<tr>
<td>test</td>
<td>123</td>
</tr>
</table>
for all of the td and input values without applying id's and classes?! please pay attention that td innerhtml didnt change :) thank you all for the help! ;)
That's pretty easy.
Name your table first (to find it easily).
<table id="the_table">
<tr>
<td><input value="test" /></td>
</tr>
</table>
Then you can do this:
$('#the_table td input[type="text"]').each(function() {
var val = $(this).val();
$(this).parent('td').html(val);
});
Live demo.
Explanation:
find all inputs that are within <td> that are in this certain table.
for each input:
2.1 retrieve value from the input
2.2 find first parent of the input that is a <td> tag and set its innerHTML to that value
Yes, you can do it like this:
$('table td:has(:input:only-child)').each(function () {
$(this).html($(':input', this).val());
});
It assumes there only is an input in the td. If that is not the case, then remove :only-child.
Explanation of table td:has(:input:only-child)
It says, take any td within a table, which has an input as the only child.
You can test it here: http://jsfiddle.net/eydtw/
Update: take the input which is not hidden.
$('table td:has(input[type!="hidden"])').each(function () {
$(this).html($('input[type!="hidden"]', this).val());
});
http://jsfiddle.net/eydtw/1/
or: take the input which is text.
$('table td:has(input:text)').each(function () {
$(this).html($('input:text', this).val());
});
http://jsfiddle.net/eydtw/3/
$.each($('table td'),function(){
if($(this).children().length !=0)
{
var temp = $($(this).children()[0]).val();
$(this).html(temp);
}
})