How to get pass the i from a for loop to the id tag in jquery?-CodePudding

I have a some inputs with different ids as you see down here

<tr>

    <td><input type="number" id="cell1" ></td>
    <td><input type="number" id="cell2" ></td>
    <td><input type="number" id="cell3" ></td>



    <td><input type="number" id="cell4"></td>
    <td><input type="number" id="cell5"></td>
    <td><input type="number" id="cell6"></td>



    <td><input type="number" id="cell7" ></td>
    <td><input type="number" id="cell8" ></td>
    <td><input type="number" id="cell9" ></td>

</tr>

Now I want to use jquery to restrict the number the user enters in the inputs with something like this

for(var i = 0 ; i <= 81 ; i  ) {


    $(document).ready(function () {
        $("#cell" , i).change(function () {

            var n = $("#cell",i).val();
            console.log($("#cell", i));
            if (n < 1)
                $("#cell", i).val(1);
            if (n > 9)
                $("#cell" , i).val(9);
        });
    });

}

But it doesn't get the ids. How can I pass the i variable to "#cell"?

CodePudding user response：

Several things. You likely want this selector - id starts with cell

$(function() {
  $("[id^=cell]").on("input",function() {
    const val = this.value
    if (val < 0) this.value = 1
    if (val > 0) this.value = 9
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>

      <td><input type="number" id="cell1"></td>
      <td><input type="number" id="cell2"></td>
      <td><input type="number" id="cell3"></td>



      <td><input type="number" id="cell4"></td>
      <td><input type="number" id="cell5"></td>
      <td><input type="number" id="cell6"></td>



      <td><input type="number" id="cell7"></td>
      <td><input type="number" id="cell8"></td>
      <td><input type="number" id="cell9"></td>

    </tr>

  </tbody>
</table>

HTML version

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>

      <td><input type="number" id="cell1" min=1 max=9></td>
      <td><input type="number" id="cell2" min=1 max=9></td>
      <td><input type="number" id="cell3" min=1 max=9></td>
      <td><input type="number" id="cell4" min=1 max=9></td>
      <td><input type="number" id="cell5" min=1 max=9></td>
      <td><input type="number" id="cell6" min=1 max=9></td>
      <td><input type="number" id="cell7" min=1 max=9></td>
      <td><input type="number" id="cell8" min=1 max=9></td>
      <td><input type="number" id="cell9" min=1 max=9></td>

    </tr>

  </tbody>
</table>

CodePudding user response：

First, move your loop inside the $document.ready

Then simply append i to the id prefix to make the correct querySelector for the cell.

Although it doesn't answer your question you could also use the min and max attributes to accomplish your task.

Here is a working example of appending the loop counter i.

// create 81 inputs for demo purposes
$(document).ready(function () {
  var row= $('#myrow');
  for(var i = 0 ; i <= 81 ; i  )
  {
    row.append($('<td/>').append('<input type="number" />').attr("id", "cell"   i));
  }
});

$(document).ready(function () {
  for(var i = 0 ; i <= 81 ; i  ) {
$("#cell"  i).change(function (e) {
  var input= $(e.target);
  var n = input.val();
  if (n < 1)
    input.val(1);
  else if (n > 9)
    input.val(9);               
  });
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<tr id='myrow'>
</tr>
</table>