Here is my code:
var result = '';
var rows = $("#table_wf tbody tr input[type='checkbox']:checked").closest('tr');
for (var i = 0; i < rows.length; i++) {
var row = rows[i]
result += rows[i].cells[0].innerHTML;
var v = rows[i].cells.find("td input[type=text]");
if (rows[i].cells.find("input[type=text]").length) {
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table id="table_wf">
<tbody>
<tr>
<td>A</td>
<td>Some Dummy Text</td>
<td></td>
<td><input id="chk_001" type="checkbox" selected></td>
</tr>
<tr>
<td>B</td>
<td>Some Dummy Text</td>
<td><input id="text_002" type="text" value="22"/></td>
<td><input id="chk_002" type="checkbox" selected/></td>
</tr>
</tbody>
</table>
1st column contain codes like A,B,C
2nd column contain some dummy text
3rd column might contain a input box or might not, here 1st row does not have text box, 2nd row does
4th and last column contain a checkbox
now on change of any checkbox what I want is
text from column 1 + text from column 3 text box if present
I am able to get value from first <td>
tag of row but not able to check if that row contain text box in 3rd <td>
tag and if does, retrieve it's value
if (rows[i].cells.find("input[type=text]").length) {}
This is found on a post but it says that find rows[i].cells.find
is not a function.
Maybe .find
is not available on cells.
Anyway to accomplish this ?
value should be A (1st row), B22 (from 2nd row)
One comment suggested that rows[i].cells.find("td input[type=text]")
means that finding a td within td collection because rows[i].cells return list of td, so I changed it to
rows[i].find("td input[type=text]").length
But error is still "rows[i].find is not a function"
Your requirement is exactly what .map
was designed for.
Keeping with jquery one liner:
$("#table_wf tbody tr td :checked")
.closest('tr')
.map((i, e) =>
$(e).find("td").eq(0).text() + ($(e).find("input[type='text']").val() || "")
).toArray();
Breakdown:
.find("td").eq(0)
and returns its text.val()
will give the value of the first found|| ""
converts undefined
to empty string.toArray()
converts the jquery .map response to a basic array.join(" ")
if you want as a single string or use the arraySnippet
$("#table_wf :checkbox").click(() => {
var result = $("#table_wf tbody tr td :checked").closest('tr').map((i, e) => $(e).find("td").eq(0).text() + ($(e).find("input[type='text']").val() || "")).toArray();
console.log(result.join(" "))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table id="table_wf">
<tbody>
<tr>
<td>A</td>
<td>Some Dummy Text</td>
<td></td>
<td><input id="chk_001" type="checkbox" selected></td>
</tr>
<tr>
<td>B</td>
<td>Some Dummy Text</td>
<td><input id="text_002" type="text" value="22" /></td>
<td><input id="chk_002" type="checkbox" selected checked /></td>
</tr>
</tbody>
</table>