What is the best way to pass the value of the index 'i' from a for loop to the id attribute in

Question

What is the best way to pass the value of the index 'i' from a for loop to the id attribute in

Here are some input fields with different IDs:

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

I am looking to restrict the user from entering certain numbers by using jQuery. Here is an example of what I have tried:

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);
        });
    });

}

However, this code does not recognize the IDs. How can I pass the variable i to "#cell"?

javascript html jquery css jquery-ui

Answer 1

Answer №1

When working with elements that have IDs starting with "cell," you can use the following selector

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

For the HTML version, the input fields can also specify a minimum and maximum value of 1 to 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" 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>

Answer 2

When working with elements that have IDs starting with "cell," you can use the following selector

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

For the HTML version, the input fields can also specify a minimum and maximum value of 1 to 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" 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>

Answer 3

Answer №2

To start, ensure that your loop is placed inside the $document.ready function.

Next, you can add i to the id prefix in order to correctly target the cell using the querySelector.

While this may not directly address your inquiry, another option is utilizing the min and max attributes to achieve your goal.

Below is a functional demonstration of incorporating the loop counter i:

// Demonstrating the creation of 81 input elements for illustration 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>

Answer 4

To start, ensure that your loop is placed inside the $document.ready function.

Next, you can add i to the id prefix in order to correctly target the cell using the querySelector.

While this may not directly address your inquiry, another option is utilizing the min and max attributes to achieve your goal.

Below is a functional demonstration of incorporating the loop counter i:

// Demonstrating the creation of 81 input elements for illustration 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>

What is the best way to pass the value of the index 'i' from a for loop to the id attribute in

Answer №1

Answer №2

Similar questions

How can I use jQuery to navigate through list items using the up and down keys while maintaining the cursor position?

Adjust the height of taller images to match the size of other images within a flexbox grid

Is there a way to hide an image once my scrollable div has reached a specific height?

Finding the Closest Element with jQuery's .closest() Method

Obtaining the identifier of a selected checkbox upon page initialization

Is it possible to transmit messages from a Chrome extension to a Java server?

"Unlock the secrets to commanding respect in the web form layout by mastering the art

Improving and Expanding the jQuery Accordion Menu

CSS - Maximizing One Column's Width While Allocating Percentage Space for Two Columns?

What are the implications of dynamically setting or changing event handlers in web development?

There seems to be an unidentified issue causing my carousel to malfunction

What steps are needed to successfully integrate bootstrap.js, jquery, and popper.js into a project by using NPM to add Bootstrap?

What is the best way to compress a set of string data in AngularJS?

Exploring Django and JQuery Autocomplete: A Guide to Handling Numerous Foreign Keys in Form Submissions (Django Snippet 233)

The GLTFLoader does not support the replacement of its default materials

Creating a hover effect in CSS that applies to neighboring elements with similar attributes

Rails 6 does not have support for matching multiple route parameters

Changing the onclick value with jQuery

Removing HTML elements and accounting for new lines in a text box

Browsing through a jQuery JSON object in Chrome reveals a dynamic reshuffling of its order