Question

我有一个动态添加html表列的代码。这些新列有3个无线电。我想在每行中从这3个中选择一个无线电。

我正在尝试查找表格行索引，以便我可以将其添加到广播ID中。但是获得价值未定义。

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

问题：'这个所有无线电的Coz具有相同的ID，我只能选择所有无线电中的一个...而不是每行一个..

这是我的代码

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

Answer 1

rowIndex是一个DOM属性，不能在jQuery对象上使用。此外，$("#myTable tr")会返回所有行的集合，因此索引不会只是您要追加的行。

您可以在.append()调用中直接提供HTML，而不是直接提供HTML。然后将为集合中的每个元素调用此方法（类似于在.append()内调用.each()），并且将追加其返回值。

您还错过了"属性中的结束name。

＆＃13;

$(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">';
    });
  });
});

＆＃13;

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

＆＃13;

Answer 2

遍历每一行以获取索引，然后追加。这个如果你想使用.index（），否则其他答案建议你可以使用.each生成的索引。

像这样的东西

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

Answer 3

您必须手动将内容附加到每一行，因为append函数不会重新评估每个项目的表达式。 each确实......

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

jQuery：动态表 - 行索引

3 个答案: