jQuery : Dynamic table - row index

Question

I have a code which dynamically add html table columns. And these new columns have 3 radios. And I want to select a single radio out of these 3 in each rows.

I am trying to find out the table row index so that I can add this to the radio id. But getting value undefined .

https://jsfiddle.net/jjayaraman/evo6kx0k/

Problem : 'Coz of this all radio has same ID and I can select only one of all the radios... not one for each row..

Here is my code

$(document)
  .ready(
    function() {
      $("#addBtn")
        .click(
          function() {
            $("#myTable thead tr")
              .append(
                '<th colspan="3">New Header</th>')
            $('#myTable tbody tr')
              .append(
                '<td><input type="radio" name="interActivity' + $('#myTable tr').rowIndex + ' value="Y"></td><td><input type="radio" name="interActivity' + $('#myTable tr').rowIndex + ' value="N"></td><td><input type="radio" name="interActivity' + $('#myTable tr').rowIndex + ' value="NA">')
          });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>

  <table border="1" id="myTable">
    <thead>
      <tr>
        <th>Heading1</th>
        <th>Heading2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>R1 Column1</td>
        <td>R1 Column2</td>
      </tr>
      <tr>
        <td>R2 Column1</td>
        <td>R2 Column2</td>
      </tr>
      <tr>
        <td>R3 Column1</td>
        <td>R3 Column2</td>
      </tr>

    </tbody>
  </table>

  <br>
  <input id="addBtn" type="button" value="Add column">

</form>

Could you please reproduce the issue in a fiddle..

Lal
– Lal

2015-07-16 17:12:16 +00:00
Commented Jul 16, 2015 at 17:12 — Lal
– Lal, Commented Jul 16, 2015 at 17:12
@lal added link for fiddle.

Jay
– Jay

2015-07-16 17:18:38 +00:00
Commented Jul 16, 2015 at 17:18 — Jay
– Jay, Commented Jul 16, 2015 at 17:18

Barmar · Accepted Answer · 2015-07-16 17:28:58Z

rowIndex is a DOM property, it can't be used on a jQuery object. Also, $("#myTable tr") returns a collection of all the rows, so the index won't be just the row that you're appending to.

Instead of supplying HTML directly in the .append() call, you can give it a function. This will then be called for each element in the collection (similar to calling .append() within .each()), and its return value will be appended.

You were also missing the closing " in the name attributes.

$(document).ready(function() {
  $("#addBtn").click(function() {
    $("#myTable thead tr").append('<th colspan="3">New Header</th>');
    $('#myTable tbody tr').append(function(i) {
      var name = 'interActivity' + i;
      return '<td><input type="radio" name="' + name + '" value="Y"></td><td><input type="radio" name="' + name + '" value="N"></td><td><input type="radio" name="' + name + '" value="NA">';
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>

  <table border="1" id="myTable">
    <thead>
      <tr>
        <th>Heading1</th>
        <th>Heading2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>R1 Column1</td>
        <td>R1 Column2</td>
      </tr>
      <tr>
        <td>R2 Column1</td>
        <td>R2 Column2</td>
      </tr>
      <tr>
        <td>R3 Column1</td>
        <td>R3 Column2</td>
      </tr>

    </tbody>
  </table>

  <br>
  <input id="addBtn" type="button" value="Add column">

</form>

Amit · Accepted Answer · 2015-07-16 17:19:56Z

You have to manually append the content to each row since the append function doesn't reevaluate the expression for each item. each does...

$(document)
  .ready(
    function() {
      $("#addBtn")
        .click(
          function() {
            $("#myTable thead tr")
              .append(
                '<th colspan="3">New Header</th>')
            $('#myTable tbody tr')
              .each(function(i) {
                $(this).append(
                  '<td><input type="radio" name="interActivity' + i + ' value="Y"></td><td><input type="radio" name="interActivity' + i + ' value="N"></td><td><input type="radio" name="interActivity' + i + ' value="NA">')
              })
          });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>

  <table border="1" id="myTable">
    <thead>
      <tr>
        <th>Heading1</th>
        <th>Heading2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>R1 Column1</td>
        <td>R1 Column2</td>
      </tr>
      <tr>
        <td>R2 Column1</td>
        <td>R2 Column2</td>
      </tr>
      <tr>
        <td>R3 Column1</td>
        <td>R3 Column2</td>
      </tr>

    </tbody>
  </table>

  <br>
  <input id="addBtn" type="button" value="Add column">

</form>

Dhiraj · Accepted Answer · 2015-07-16 17:24:42Z

Iterate through each row to get the index and then append. This if you WANT to use .index() otherwise as other answers suggest you can just use the index generated from .each.

Something like this

$('#myTable tbody tr').each(function(index, value){
  var index = $(this).index(); // or just index
  $(this).append('<td><input type="radio" name="interActivity' + index + ' value="Y"></td><td><input type="radio" name="interActivity' + index + ' value="N"></td><td><input type="radio" name="interActivity' + index + ' value="NA">')
});

<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#addBtn").click(function() {
          $("#myTable thead tr").append('<th colspan="3">New Header</th>')
          $('#myTable tbody tr').each(function(){
            var index =$(this).index();
            $(this).append('<td><input type="radio" name="interActivity' + index + ' value="Y"></td><td><input type="radio" name="interActivity' + index + ' value="N"></td><td><input type="radio" name="interActivity' + index + ' value="NA">')
          });
        });
      });
    </script>

  </head>

  <body>
    <form>

      <table border="1" id="myTable">
        <thead>
          <tr>
            <th>Heading1</th>
            <th>Heading2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>R1 Column1</td>
            <td>R1 Column2</td>
          </tr>
          <tr>
            <td>R2 Column1</td>
            <td>R2 Column2</td>
          </tr>
          <tr>
            <td>R3 Column1</td>
            <td>R3 Column2</td>
          </tr>

        </tbody>
      </table>

      <br> <input id="addBtn" type="button" value="Add column">

    </form>


  </body>
</html>

Collectives™ on Stack Overflow

jQuery : Dynamic table - row index

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related