Question

我有这个代码，我到目前为止尝试但它没有给我我想要的结果。

$(document).ready(function(){
  $(".get_attr").click(function (){
    var trow;//=$('.optionsForm tr:first').html();
    trow='<tr><th>Class</th><tr><td>sdfg</td></tr><tr><td>sdfg</td></tr><tr><td>sdfg</td></tr><tr><td>sdfg</td></tr></tr>';
    $('.optionsForm ').append(trow);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
      
  <table border="1" class='optionsForm'>
    <tr><th>Name</th></tr>
    <tr><td>sdg</td></tr>
    <tr><td>sdfg</td></tr>
    <tr><td>sdgds</td></tr>
  </table>

  <button type="button" data-id="5" class="get_attr" >Click Me</button>
</body>

当我点击按钮时，th和其他td添加了冒号，但我希望将所有这些添加到右侧这样的

Name    Class
sdg     sdg
sdfg    sdfg
sdgds   sdfgds

而不是这样：

Name
sdg
sdfg
sdgds

Class
sdfg
sdfg
sdfg
sdfg

有人可以给我一些帮助。

Answer 1

这是因为你附加了整个html <tr><th>Class</th><tr><td>sdfg</td></tr><tr><td>sdfg</td></tr><tr><td>sdfg</td></tr><tr><td>sdfg</td></tr></tr>。您应该将th / td分别附加到您想要的tr中。例如

$('.optionsForm tr:eq(0)').append('<th>Class</th>');
$('.optionsForm tr:eq(1)').append('<td>sdfg</td>');

$(document).ready(function(){
  $(".get_attr").click(function (){
    $('.optionsForm tr:eq(0)').append('<th>Class</th>');
    $('.optionsForm tr:eq(1)').append('<td>sdfg</td>');
    $('.optionsForm tr:eq(2)').append('<td>sdfg</td>');
    $('.optionsForm tr:eq(3)').append('<td>sdfg</td>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
      
  <table border="1" class='optionsForm'>
    <tr><th>Name</th></tr>
    <tr><td>sdg</td></tr>
    <tr><td>sdfg</td></tr>
    <tr><td>sdgds</td></tr>
  </table>

  <button type="button" data-id="5" class="get_attr" >Click Me</button>
</body>

Answer 2

您可以使用解决方案

＆＃13;

$(document).ready(function(){
  $(".get_attr").click(function (){
    var trow;   
    var columnContent = ['Class', 'sdfg', 'sdfg', 'sdfg'];
    
    for(var i=0; i<columnContent.length; i++){
      if(i==0){
        $('.optionsForm ').find('tr:eq(' + i + ')').append('<th>' + columnContent[i] + '</th>');
      } else {
        $('.optionsForm ').find('tr:eq(' + i + ')').append('<td>' + columnContent[i] + '</td>');
      }
    }
   
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
      
  <table border="1" class='optionsForm'>
    <tr><th>Name</th></tr>
    <tr><td>sdg</td></tr>
    <tr><td>sdfg</td></tr>
    <tr><td>sdgds</td></tr>
  </table>

  <button type="button" data-id="5" class="get_attr" >Click Me</button>
</body>

＆＃13;

希望这会对你有所帮助

Answer 3

您的代码无效，因为您必须为每个现有td´s添加新的tr，以便您可以创建一个数组然后循环它，如下所示：

$(document).ready(function() {
  $(".get_attr").click(function() {
    var cont = 1;
    var val = ["<td>sdfg1</td>", "<td>sdfg2</td>", "<td>sdf3g</td>", "<td>sdfg4</td>"];

    $("tr:first").append("<th>Class</th>");
    for(var i in val){
      $("tr").eq(cont).append(val[i]);
      cont++;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table border="1" class='optionsForm'>
  <tr><th>Name</th></tr>
  <tr><td>sdg</td></tr>
  <tr><td>sdfg</td></tr>
  <tr><td>sdgds</td></tr>
</table>

<button type="button" data-id="5" class="get_attr" >Click Me</button>

将列添加到正确的jQuery表中

3 个答案: