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);
}
})
Related
Hopefully someone will be able to help me with this. I have a dynamically created table full of info, and I am trying to use JQuery to only show rows that are matching what is being typed in the search bar. The match is of the first td within each row. I am not sure why this does not work.
JQuery
var $foo = $('#table-name tr input[name="someValue"]');
$('#search').keyup(function() {
var bar = $.trim($(this).val()).toLowerCase();
$foo.parent().parent().show().filter(function() {
var thud = $(this).val().toLowerCase();
return !~thud.indexOf(bar);
}).hide();
When entering any character in the search bar all of the rows disappear, whether or not there are any matches. The table is structured as follows:
table
<table id="table-name">
<thead>
<tr>
<th>0</th>
<th>1</th>
</tr>
</thead>
<c:forEach>
<form:form id = “{id}”>
<tr id="${id2}">
<td><input type="text" class= “someClass" name= “someValue"> </input></td>
<td><select class="someClass" name="otherValue"> </select> </td>
</tr>
</form:form>
</c:forEach>
</table>
Why is my JQuery not behaving correctly?
No need to reinvent the wheel. Try this one:
JQuery Quicksearch: http://deuxhuithuit.github.io/quicksearch/r/examples/
Your JS code becomes no more than:
$('#id_search').quicksearch('table#table_example tbody tr');
See running example: http://jsfiddle.net/ddan/tqhxqwrh/1
I have this kind of structure in my table
<table>
<c:forEach ...>
<tr>
<td>test</td> // i have this value
<td>random value</td>
<td>random value</td>
<td>random value</td>
</tr>
</c:forEach>
</table>
I have the text of the first <td>. I want to change the text of any of the following <td> desire after the first one using jQuery or any suggestion you have. I really having a hard time thinking of how I can do this.
Can anyone please help me?
EDIT: ( i.e. I want to change the 2nd <td> you could say $('#td2').text('test'); );
Try
//this holds the text to be searched
var text = 'text';
//use .filter() to find the td because :contains can return partial matches
var $tr = $('table td:first-child').filter(function(){
return $.trim($(this).text()) == text
}).parent();
var $tds = $tr.find('td');//this is all the tds in the row
$tds.eq(1).text('updated');//use the index to update the content
Demo: Fiddle
This will update the 2nd TD with jQuery:
$(function() {
$('table tr td:nth-child(2)').html('updated');
});
You could write a loop to iterate and do this across as many cells as you 'desire'.
Fiddle here
use below jQuery code:
$(document).ready(function(){
$("tr :not(:first-child)").text("NEW TEXT");
});
look at this fiddle
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
Scenario:
I'm using datatable library to display alot of information. That table have the following rows:
Id Type Name Case
What I'm looking for is that when I click the second row Type, that value will be taking and pasted in a textbox
Example
Id Type Name Case
1 text Juan 20001
3 List Pedro 20005
If I click the row that has the id # 1, I need to take the Type innerHTML. Does not matter what apart of the row I click just take the second td's html.
I tried with this code:
$("tr td").click(function () {
alert($(this).html());
})
It worked great, But the problem is that the user have to click exactly the row Name, but would be better if user can click over any of the row and just take the second rows html.
Suggesstions?
myRow.getElementsByClassName('td')[1].innerHTML
should get you the innerHTML of the second table cell of myRow as long as the first table cell does not contain a nested table.
You might try adding the click handler to the rows instead of to the cells too.
Try using eq()
but would be better if user can click over any of the row and just
take the second rows html.
$("tr td").click(function () {
secondrow = $(this).closest('tr').siblings().eq(1);
});
If i click the row that has the id # 1, i need to take the Type
innerHTML. Does not matter what apart of the row i click just take the
second td's html.
$("tr td").click(function () {
secondTd = $(this).siblings().eq(1);
alert(secondTd.html());
});
Try this
$(function () {
$("#thetable tr").click(function () {
if ($(this).index() == 0) return;
$('#tbox').val($('td:nth-child(2)', $(this)).html())
})
});
HTML
<table border="1" cellpadding="4" id="thetable">
<tr>
<td>Id</td>
<td>Type</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table><br />
<input type="text" name="tbox" id="tbox" />
It method takes into account the first row that contains only labels and doesn't set the textbox value to a label if top row is clicked.
I need to loop through all checkboxes that are inside a div tag with id #abc123
How can I do this?
$("#abc123").foreach( ???? )
Update
my html row looks like:
<tr>
<td><input .../> </td>
<td>234</td>
</tr>
I need to add the value of the <td> into the ID of the checkbox.
Would I just get the parent, then ancestor it somehow?
$("#abc123 input[type=checkbox]").each(function()
{
});
UPDATE:
Ok, Let'd see if I got this straight. Given:
<tr>
<td><input .../> </td>
<td>234</td>
</tr>
You want the result to be (effectively)
<tr>
<td><input id="abc234" .../> </td>
<td>234</td>
</tr>
$("td input[type=checkbox]").each(function()
{
var id = $(this).next("td").text();
$(this).attr("id", "abc"+ id);
});
$("#abc123 input[type=checkbox]").each(function() {
$(this).dosomething();
});
Use a onkeydown event... I recommend the tab key which is keycode "9"
$(document).keydown(function(e){
if(event.keyCode == '9'){
...
}
Inside the if statement you'll need a nested if statement that checks which element is in focus and then assigns focus to the next element like this :
document.div.id.focus();
You didn't label where #abc123 is in your code. Also, do the <td> tags have any identification? The following may work.
$("#abc123 input:checkbox").each(function(i) {
id = $(this).closest('td').next('td').text();
$(this).attr('id', id);
});
I am not sure how deep your <div id="abc123"> is in the <td> so I used the closest() method to get to the cell wrapper. If it is only 1 deep, i.e. there is no <div> as it appears in your code, then you can just use parent(). Good luck.