I have a table with multiple rows. there are several columns in the table with checkboxes. I need to loop through each of the checkboxes, where it is checked concatenate/join the input from that particular cell to other inputs from the same row.
you can see a fiddle here: http://jsfiddle.net/QS56z/10/
How can I, in addition to looping through the row, loop through each <td>
once I have this <td>
how can I look for an input whose name starts with x
in that td. once found concatenate / join the input from that to the inputs in the row.
I hope that makes sense.
essentially: I want to join the (family) to the (size) to the (grade) where family and grade are on the same row, and there are several sizes on each row. each result must be written to the TD currently being processed.
I have got up to this point but have got stuck:
function createcodes(){
alert('running');
//run through each row
$('.authors-list tr').each(function(){
//processing this row
//how to process each cell(table td) where there is checkbox
$($(this).find('input[name^="line"]').val(
$('$(this).find('input[name^="family"]'').val() + ' ' + // common input(family) on row, use for all table cells(td)
$('#$(this).find('input[name^="size"]'').val() + ', ' + // this cells input called size, unique to this cell only
$('#$(this).find('input[name^="grade"]'').val() // common input(grade) on row, use for all table cells(td)
);
// end of cell row processing
});
//end of rows processing
}
Thanks as always.
http://jsfiddle.net/QS56z/10/
my html is:
<table class="authors-list" border=1 id="ordertable">
<tr>
<td ><input type="text" id="product1" name="product1" class="rounded" value="38114CR"></td>
<td ><input type="text" size='5' id="qty1" name="qty1" class="rounded" value="10"/></td>
<td class="tdcheckbox">
<input type="checkbox" id="h09_1" name="h09_1" checked class="rounded"/>
<input type="text" id="line_1_09" name="line_1_09" >
<input type="text" id="size_1_09" name="size_1_09" value="09">
</td>
<td class="tdcheckbox">
<input type="checkbox" id="h12_1" name="h12_1" class="rounded"/>
<input type="text" id="line_1_12" name="line_1_12" value="">
<input type="text" id="size_1_12" name="size_1_12" value="12">
</td>
<td class="tdcheckbox">
<input type="checkbox" id="h15_1" name="h15_1" checked class="rounded"/>
<input type="text" id="line_1_15" name="line_1_15" >
<input type="text" id="size_1_15" name="size_1_15" value="15">
</td>
<td><input type="text" name="cubespercheck_1" id="cubespercheck_1" value="0" size=5></td>
<td><input type="text" name="skufamily_1" id="skufamily_1" value="38114"></td>
<td><input type="text" name="skugrade_1" id="skugrade_1" value="cr"></td>
</tr>
</table>
<input type="button" id="continue" value="continue">
keep in mind there are multiple rows. Thanks.
UPDATED
I've updated your demo: http://jsfiddle.net/terryyounghk/QS56z/18/
Also, I've changed two ^=
to *=
. See http://api.jquery.com/category/selectors/
And note the :checked
selector. See http://api.jquery.com/checked-selector/
function createcodes() {
//run through each row
$('.authors-list tr').each(function (i, row) {
// reference all the stuff you need first
var $row = $(row),
$family = $row.find('input[name*="family"]'),
$grade = $row.find('input[name*="grade"]'),
$checkedBoxes = $row.find('input:checked');
$checkedBoxes.each(function (i, checkbox) {
// assuming you layout the elements this way,
// we'll take advantage of .next()
var $checkbox = $(checkbox),
$line = $checkbox.next(),
$size = $line.next();
$line.val(
$family.val() + ' ' + $size.val() + ', ' + $grade.val()
);
});
});
}
Try this:
function createcodes() {
$('.authors-list tr').each(function () {
//processing this row
//how to process each cell(table td) where there is checkbox
$(this).find('td input:checked').each(function () {
// it is checked, your code here...
});
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With