I have a table as below;
<table id="mytable" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td><input type="text" name="qwer"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="asddf"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="zxcv"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="poiu"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="lkjh"></td>
<td> </td>
</tr>
<tr>
<td colspan="3"> <button id="BUT">BUT</button> </td>
</tr>
</table>
The middle cells contain text fields with names. I want to get data (I think .val()) from specific input fields. How can I get them? Say I want to alert value we enter in input name="zxcv".
You can see my Fiddle here.
How can I do this?
try this
$('#mytable input[name=zxcv]').val()
If you want to iterate on input fields, and show "name" and "value" when "BUT" is clicked :
$("#BUT").click(function() {
$("#mytable input").each(function() {
alert("name : " + $(this).attr('name') + " - value : " + $(this).val());
});
});
Related
I have to pass the selected rows to a function( ). From the below code, I am able to get the value of selected checkbox but could not get the entire row. Please help me on how to get the entire selected rows and pass those rows to a function.
my html code:
<div id ="div_table">
<table id="myTable">
<tr>
<th>SELECT</th>
<th>BANKID</th>
<th>EFFECTIVE SAVE DATE</th>
<th>SAVE MONTH</th>
<th>MONTH OF SUBMISSION</th>
<th>PILLAR</th>
<th>LEVER</th>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1000" id="1000"></td>
<td id="bank" >100000</td>
<td id="edate">10-02-2009</td>
<td id="month">Jan</td>
<td id="subMonth"><input type="text" id="subMonth"></td>
<td id="pillar"><input type="text" id="pillar1"></td>
<td id="lever"><input type="text" id="lever1"></td>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1001" id="1001"></td>
<td id="bank1" >100001</td>
<td id="edate1">12-12-2010</td>
<td id="month1">Feb</td>
<td id="subMonth1"><input type="text" id="subMonth2"></td>
<td id="pillar1"><input type="text" id="pillar2"></td>
<td id="lever1"><input type="text" id="lever12"></td>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1002" id="1002"></td>
<td id="bank2" >100002</td>
<td id="edate2">18-02-2018</td>
<td id="month2">Apr</td>
<td id="subMonth2"><input type="text" id="subMonth3"></td>
<td id="pillar2"><input type="text" id="pillar3"></td>
<td id="lever2"><input type="text" id="lever13"></td>
</tr>
</table>
</div>
My jQuery Code:
$('#div_table').click(function() {
var result = []
$('input:checkbox:checked', tableControl).each(function() {
result.push($(this).parent().next().text());
});
alert(result);
});
The selected rows should be passed to the below function:I have to use these rows one by one and store.
function invokeAllEligibleSaves(result){
alert(result)
}
It will be very much useful for me If i get a working code. Thanks in advance.
One way to achieve that is like this:
First : get a reference to the input element that triggered the function. From this element, you can reach the .closest() parent that has the tag <tr>.
Second: This can then be queried for all of its <td> .children() and each child will either have .text() or .html() to report back. I think in your case, you are interested in the text part.
Third: You will need to push all .text() values in a separate array, that will be your row. Then push that row into another array result. So your result will be an array of arrays.
$('#div_table').click(function() {
var result = [] // create an empty array for all rows
$('input:checkbox:checked').each(function() {
var row = []; // create an empty array for the current row
//loop through all <td> elements in that row
$(this).closest('tr').children('td').each(function(){
// add .text() or .html() if you like
row.push($(this).text());
});
// now push that row to the result array
result.push(row);
});
alert(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="div_table">
<table id="myTable">
<tr>
<th>SELECT</th>
<th>BANKID</th>
<th>EFFECTIVE SAVE DATE</th>
<th>SAVE MONTH</th>
<th>MONTH OF SUBMISSION</th>
<th>PILLAR</th>
<th>LEVER</th>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1000" id="1000"></td>
<td id="bank">100000</td>
<td id="edate">10-02-2009</td>
<td id="month">Jan</td>
<td id="subMonth"><input type="text" id="subMonth"></td>
<td id="pillar"><input type="text" id="pillar1"></td>
<td id="lever"><input type="text" id="lever1"></td>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1001" id="1001"></td>
<td id="bank1">100001</td>
<td id="edate1">12-12-2010</td>
<td id="month1">Feb</td>
<td id="subMonth1"><input type="text" id="subMonth2"></td>
<td id="pillar1"><input type="text" id="pillar2"></td>
<td id="lever1"><input type="text" id="lever12"></td>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1002" id="1002"></td>
<td id="bank2">100002</td>
<td id="edate2">18-02-2018</td>
<td id="month2">Apr</td>
<td id="subMonth2"><input type="text" id="subMonth3"></td>
<td id="pillar2"><input type="text" id="pillar3"></td>
<td id="lever2"><input type="text" id="lever13"></td>
</tr>
</table>
</div>
You just need an additional .parent() in your result.push statement to get the whole row, because you're only getting the cell so far:
result.push($(this).parent().parent().next().text());
This would be a more effective solution for your problem. The drawback with the accepted answer is, it will get triggered whenever & wherever you click inside the table (even when you click on a text).
Here it gets updated only when a checkbox is selected.
$(document).ready(function() {
$('input:checkbox').on('change', function() {
var result = [];
$('input:checkbox:checked').each(function() {
var rowText = '';
$(this).parent().siblings().each(function() {
rowText += $(this).text() + ' ';
});
result.push(rowText.trim());
});
alert(JSON.stringify(result));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id ="div_table">
<table id="myTable">
<tr>
<th>SELECT</th>
<th>BANKID</th>
<th>EFFECTIVE SAVE DATE</th>
<th>SAVE MONTH</th>
<th>MONTH OF SUBMISSION</th>
<th>PILLAR</th>
<th>LEVER</th>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1000" id="1000"></td>
<td id="bank" >100000</td>
<td id="edate">10-02-2009</td>
<td id="month">Jan</td>
<td id="subMonth"><input type="text" id="subMonth"></td>
<td id="pillar"><input type="text" id="pillar1"></td>
<td id="lever"><input type="text" id="lever1"></td>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1001" id="1001"></td>
<td id="bank1" >100001</td>
<td id="edate1">12-12-2010</td>
<td id="month1">Feb</td>
<td id="subMonth1"><input type="text" id="subMonth2"></td>
<td id="pillar1"><input type="text" id="pillar2"></td>
<td id="lever1"><input type="text" id="lever12"></td>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1002" id="1002"></td>
<td id="bank2" >100002</td>
<td id="edate2">18-02-2018</td>
<td id="month2">Apr</td>
<td id="subMonth2"><input type="text" id="subMonth3"></td>
<td id="pillar2"><input type="text" id="pillar3"></td>
<td id="lever2"><input type="text" id="lever13"></td>
</tr>
</table>
</div>
I want to get contents of each rows and write it in input but i can't do this work.
<table>
<tbody>
<tr>
<td>
<div id="a">abc</div>
</td>
</tr>
<tr>
<td>
<div id="b">abcd</div>
</td>
</tr>
<tr>
<td>
<div id="c">abcdf</div>
</td>
</tr>
<tr>
<td>
<div id="d">abcde</div>
</td>
</tr>
<tr>
<td>
<button class="magicButton">choose this row</button>
</td>
</tr>
</tbody>
</table>
$(document).ready(function(){
$('.magicButton').click(function(){
// insert text of div a into input
// insert text of div b into input
// ect
});
});
Once you press the button it gets this values into following
<input type="text" name="whatver" div="fromValueA" readonly>
<input type="text" name="whatver" div="fromValueB" readonly>
<input type="text" name="whatver" div="fromValueC" readonly>
<input type="text" name="whatver" div="fromValueD" readonly>
How exactly can I get this to not just use the same A, B ,C from all buttons that are made
Best wishes, Mike
Use jquery replaceWith() method to replacing div with input.
$("button").click(function(){
$("table td > div").replaceWith(function(index, text){
var id = "fromValue" + $(this).attr("id");
return "<input id='" + id + "' value='" + text + "' />";
});
});
table, tr, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div id="a">A</div>
</td>
</tr>
<tr>
<td>
<div id="b">B</div>
</td>
</tr>
<tr>
<td>
<div id="c">C</div>
</td>
</tr>
<tr>
<td>
<button>Change</button>
</td>
</tr>
</table>
I have a table
<table id="t">
<tr>
<td> fsabcdf </td>
<td> xyzabcdf </td>
</tr>
<tr>
<td> fsabcdf </td>
<td> xyzabcdf </td>
</tr>
<tr>
<td> fsabcdf </td>
<td> xyzabcdf </td>
</tr>
</table>
i want to replace "abc"(in td) with "abc" as in the following
<table id="t">
<tr>
<td> fs<span class='c2'>abc</span>df </td>
<td> xyz<span class='c2'>abc</span>df </td>
</tr>
<tr>
<td> fs<span class='c2'>abc</span>df </td>
<td> xyz<span class='c2'>abc</span>df </td>
</tr>
<tr>
<td> fs<span class='c2'>abc</span>df </td>
<td> xyz<span class='c2'>abc</span>df </td>
</tr>
</table>
i googled for the solution but didn't find any.
Thanks in advance.
You can do:
$('td').html(function(i, html){
return html.replace(/abc/g, '<span class="c2">abc</span>');
});
This goes through each <td>, looks at its text, then replaces every occurrence of abc with abc wrapped in the span you want.
Something like:
$('td').each(function () {
$(this).html($(this).html().replace('abc', '<span class="c2">abc</span>'));
});
http://jsfiddle.net/Ru8XX/
Try this:
$('#t td').each(function(){
$(this).html( $(this).html().replace("abc","<span class='c2'>abc</span>") );
});
The following code it is auto-explained:
HTML:
<table cellspacing="1" class="CRMP_WP_QUICKADS_PLUGIN">
<tr id="CRMP_WP_QUICKADS_tr_in_content">
<td>
<table>
<tr>
<td>
<input type="radio" name="in_content" value="1">
</td>
<td>
Enabled
</td>
</tr>
<tr>
<td>
<input type="radio" name="in_content" value="0">
</td>
<td>
Disabled
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th colspan="2">
Hover Ads
</th>
</tr>
<tr>
<td>
...
</td>
</tr>
...
</table>
javascript:
$("input[name='in_content']").click(function(){
if ($(this).val()){
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll().slice(0,6).show();
} else{
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll().slice(0,6).hide();
}
});
The hide/show effect is not running.-
Does this work?
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll()
.slice(0,6)
.each(function(index, element) {
element.hide();
});
// is not enough:
if ($(this).val())
// it must be:
if ($(this).val() == 1)
Cosider this image:
How I can select it without it's ID with jQuery? I mean how I can select it like this statement:
Find Input in Row with Code=1000 and Column Desc2
thanks
Edit 1)
HTML Code
<table border="1" width="300px">
<tr>
<td>
Desc2
</td>
<td>
Desc1
</td>
<td>
Code
</td>
</tr>
<tr>
<td bgcolor="#CCCCB3">
<input id="Text1" type="text" />
</td>
<td>
</td>
<td>
1000
</td>
</tr>
<tr>
<td bgcolor="#FFFFCC">
</td>
<td bgcolor="#FFFFCC">
</td>
<td bgcolor="#FFFFCC">
</td>
</tr>
<tr>
<td bgcolor="#CCCCB3">
<input id="Text2" type="text" />
</td>
<td>
</td>
<td>
1001
</td>
<tr>
<td bgcolor="#CCCCB3" class="style1">
<input id="Text3" type="text" />
</td>
<td class="style1">
</td>
<td class="style1">
1002
</td>
</tr>
<tr>
<td bgcolor="#CCCCB3">
<input id="Text4" type="text" />
</td>
<td>
</td>
<td>
1003
</td>
</tr>
</table>
Select the last cell, filter the row whose last cell has a value which is equal to "1000", and select the first input element of the collection:
$("table td:last-of-type").filter(function(){
return $(this).text() == "1000";
}).parent().find("input:first");
For constructing such selectors, you can use the following:
:eq() and .eq()
:nth-child() (for a specific child position only!)
Warning: Do not fall in the trap of contains(). This method select all elements which contain the given phrase. .contains(1000) will also select <td>10000</td>.