Jquery - Check if textbox exist in table cell or not

Saurabh
April 4, 2024
222 views
3 votes
4 Answers

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"

Answers

You can loop through the cells using .eq(index) to access the cell at a specific index within a row.

Demo:

var result = '';
var rows = $("#table_wf tbody tr input[type='checkbox']:checked").closest('tr');
rows.each(function() {
    var row = $(this);
    result += row.find('td:first').text(); //first column text
    var textbox = row.find('td:eq(2) input[type="text"]');
    if (textbox.length) {
        result += textbox.val(); //value of the text box if present
    }
    result += 'n'; //add a newline for each row
});
console.log(result);

<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" checked></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" checked/></td>
    </tr>
  </tbody>
</table>

Firstly, I change selected to checked in the HTML, at least for the example. Didn’t take in count possible user input.

find is a JQuery method, not a basic dom one. By only using JQuery method like find("td:first") and getting it from row and not cell, it works fine:

var result = '';
var rows = $("#table_wf tbody tr input[type='checkbox']:checked").closest('tr');
rows.each(function() {
    var row = $(this);
    var firstCell = row.find("td:first");
    result += firstCell.html();
    var v = row.find("td input[type=text]"); // search td from row, so tr
    if (row.find("input[type=text]").length) {
      console.log("founded");
    }
});

<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" checked></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" checked/></td>
    </tr>
  </tbody>
</table>

.find() is a jQuery method that is used to search through the descendants of these elements in the DOM tree and cannot be directly applied to rows[i].cells, which is a collection of DOM elements, not jQuery objects.

wrap the elements you’re working with in jQuery

Also, the selected attribute should be checked

var result = '';

// Attach a change event listener to checkboxes in the table
$("#table_wf tbody tr input[type='checkbox']").change(function() {
    result = ''; // Reset result on change
    var rows = $("#table_wf tbody tr input[type='checkbox']:checked").closest('tr');
    
    rows.each(function() {
        var row = $(this); // Wrap the row with jQuery
        var code = row.find('td:eq(0)').text(); // Get the text from the first column
        var textBox = row.find('td:eq(2) input[type="text"]'); // Find the input box in the third column
        var textBoxValue = textBox.val() ? textBox.val() : ''; // Get the value if the input box exists
        
        result += code + textBoxValue + ' '; // Concatenate the code and textBoxValue
    });

    console.log(result.trim());
});

<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>

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:

selector gets all the ticked checkboxes
gets all the rows for those checkboxes
loops through the rows
gets the first cell using .find("td").eq(0) and returns its text
gets the first textbox and returns its value – .val() will give the value of the first found
|| "" converts undefined to empty string
.toArray() converts the jquery .map response to a basic array
then you can .join(" ") if you want as a single string or use the array

Snippet

$("#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>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Check if textbox exist in table cell or not

Answers