使用jquery动态显示表格视图

Displaying Table view dynamically using jquery

本文关键字：视图 表格 动态显示 jquery 使用      更新时间：2023-09-26

我遇到了一个用适当格式显示数据的问题。请指导我如何在jquery中实现预期的结果

<script>
$(document).ready(function () {
      var numbers = ['hamburger', 'Potato salad', 'Brocolli', 'Apple pie'];
      var month = [2,3,6,5,4];
    for(i = 0; i < numbers.length; i++) { 
    console.log(numbers[i]);
    $('#foodItem').append(numbers[i]);
    $('#portionSize').append(month[i]);
    }
});
</script>


<table> <tr>
        th>Food Item</th>
        <th>Portion Size</th>           
         </tr>          
         <td id="foodItem">             
         </td>          
         <td id="portionSize">          
         </td></table>


FoodItem                                 Portion size
hamburgerPotatosaladBrocolliApple         2365

预期输出 

 FoodItem             Portion Size
  hamburger                2
  potato salad             3
  Brocolli                 6
  Apple                    5

在向表中添加数据时需要添加一个新的tr。可以这样做:

$(document).ready(function() {
  var food = ['hamburger', 'Potato salad', 'Brocolli', 'Apple pie'];
  var portion = [2, 3, 6, 5];
  for (i = 0; i < food.length; i++) {
    $('#myTable > tbody:last-child').append('<tr><td>' + food[i] + '</td><td>' + portion[i] + '</td></tr>');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>Food Item</th>
      <th>Portion Size</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

我的建议是:

$(document).ready(function () {
  var numbers = ['hamburger', 'Potato salad', 'Brocolli', 'Apple pie'];
  var month = [2, 3, 6, 5, 4];
  for (i = 0; i < numbers.length; i++) {
    $('<tr>').append($('<td>').append(numbers[i]))
    .append($('<td>').append(month[i]))
    .appendTo('table tbody');
  }
});
td:nth-child(1), th:nth-child(1) {
  text-align: left;
  width: 60%;
}
td:nth-child(2), td:nth-child(2) {
  text-align: center;
  width: 40%;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table>
    <thead>
    <tr>
        <th>Food Item</th>
        <th>Portion Size</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Try This:

$(document).ready(function(){
    var numbers = ['hamburger', 'Potato salad', 'Brocolli', 'Apple pie'];
    var month = [2,3,6,5,4];
    for(var i=0; i<numbers.length;i++) {
        $("table").append("<tr><td id=foodItem>" + numbers[i] + "</td><td id=portionSize>" + month[i] + "</td></tr>")

    }
})

最终代码:

<!DOCTYPE html>
<html>
<head>
</head>
    <body>
        
        <table border="1">
            <tr><th>Food Item</th><th>Portion Size</th></tr>       
        </table>
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        
    $(document).ready(function(){
        var numbers = ['hamburger', 'Potato salad', 'Brocolli', 'Apple pie'];
        var month = [2,3,6,5,4];
        for(var i=0; i<numbers.length;i++) {
            $("table").append("<tr><td id=foodItem>" + numbers[i] + "</td><td id=portionSize>" + month[i] + "</td></tr>")
        }
    })
    </script>
</body>
</html>

$(document).ready(function() {
  var numbers  = ['hamburger', 'Potato salad', 'Brocolli', 'Apple pie'];
  var month  = [2, 3, 6, 5];
  var newtr = '';
  for (i = 0; i < month.length; i++) {
      newtr += '<tr>';
      newtr += '<td>'+ numbers[i] + '</td>';
      newtr += '<td>'+ month[i] + '</td>';
      newtr += '</tr>';
    }
  $('#Order').append(newtr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Order">
  <thead>
    <tr>
      <th>Food Item</th>
      <th>Portion Size</th>
    </tr>
  </thead>
</table>

请按如下方式修改js和html

Js: 

$(document).ready(function() {
  var numbers = ['hamburger', 'Potato salad', 'Brocolli', 'Apple pie'];
  var month = [2, 3, 6, 5, 4];
  var table = document.getElementById("table");
  for (i = 0; i < numbers.length; i++) {
     table.append('<tr><td>' + numbers[i] + '</td><td>' + month[i]);
  }
});
Html:

<table id="table">
  <tr>
    <th>Food Item</th>
    <th>Portion Size</th>
  </tr>
</table>
相关文章：