How to change <td> value only in a specific row with jQuery?-CodePudding

If I have a table with 2 columns, a textfield and a checkbox... Each column has a class, and multiple rows in it. I don't know how to work this out: If the textfield's number larger than 10, that row's checkbox automatically change from unchecked to checked. Any ideas?

CodePudding user response：

ok .. you can get the value of the input .. and in every keystroke check if the entered number is greater than 10 then loop through all the checkboxes and check them like that

 $(".textfield").on("input", function () {
    if ( $(this).val() > 10) {
       $(".checkboxes").prop("checked", true)
    } else {
       $(".checkboxes").prop("checked", false)
    }
 })

you can try this and tell me if something went wrong

note : I added ( ) before the $(this).val() to make sure the value is converted from string to number

edit: if you want to make an input for every row so this will not work!

you can make a specific class for every row and put the same class as a data attr in every input .. and then you can directly access to the input specific row checkboxes like that

$(".textfields").on("input", function () {
  if ( $(this).val() > 10) {
     $(`.${$(this).attr("data-id")} > td > 
      checkboxes`).prop("checked", true)
  } else {
     $(`.${$(this).attr("data-id")} > td > 
      checkboxes`).prop("checked", false)
   }
})

I hope this works .. I know It's a little bit confusing .. by understanding the main idea you solve it with multible solutions

If you can't understand this let me know

CodePudding user response：

This is an example with a simple table having two columns: one with content and one with a checkbox.

On page loaded, the table gets evaluated and each checkbox gets checked if the corresponding cell value is a number > 10:

document.addEventListener('DOMContentLoaded', ()=>{
  evaluateTable();
});

function evaluateTable(){
  const rows = document.querySelectorAll('table > tbody > tr');
  for(const row of rows){
    const number = row.querySelector('td:first-child')?.innerText;
    if (parseInt(number) > 10)
      row.querySelector('input[type=checkbox]').checked = true;
  }
}

table, th, td { 
  border: solid 1px black;
}

th, td{
  text-align: center;
  padding: 1rem;
}

<table>
  <thead>
    <tr>
      <th>
        Col1
      </th>      
      <th>
        Col2
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Content
      </td>
      <td>
        <input type="checkbox" />
      </td>
    </tr>
    <tr>
      <td>
        10
      </td>
      <td>
        <input type="checkbox" />
      </td>
    </tr>
    <tr>
      <td>
        11
      </td>
      <td>
        <input type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>

CodePudding user response：

$('.input').on('blur', function() {
      if(parseInt($(this).val()) > 10){
        $(this).parent().closest('tr').find('.checkbox').attr("checked","checked");
      }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<table>
<tr>
  <td>
    <input type="text" >
  </td>
  <td>
    <input type="checkbox" >
  </td>
</tr>
<tr>
  <td>
    <input type="text" >
  </td>
  <td>
    <input type="checkbox" >
  </td>
</tr>
<tr>
  <td>
    <input type="text" >
  </td>
  <td>
    <input type="checkbox" >
  </td>
</tr>
<tr>
  <td>
    <input type="text" >
  </td>
  <td>
    <input type="checkbox" >
  </td>
</tr>
</table>

You need use blur of jQuery, it means when the user looses the focus from input/textfield then implement the functionality of checkbox to be checked, this is for single input and checkbox, if you want to achieve it for multiple row with column then see the above snippet.

$('#input_field').on('blur', function() {
  if(parseInt($(this).val()) > 10){
    $('#checkbox').attr("checked","checked");
  }
});