Question

我遇到了以适当的格式显示数据的问题。请指导我如何在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>

HTML

<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

Answer 1

在向表格添加数据时，您需要添加新的tr。这可以这样做：

@Override
public void setLayoutParams(final ViewGroup.LayoutParams params) {
    params.width = ViewGroup.LayoutParams.MATCH_PARENT;
    super.setLayoutParams(params);
}

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

Answer 2

我的建议是：

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

Answer 3

试试这个：

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

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

请修改js和html，如下文

JS：

[{struct, PropList} | _] = lists:dropwhile(...),

HTML：

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

使用jquery动态显示表视图

5 个答案: