jqueryを使用してテーブルビューを動的に表示

データを適切な形式で表示することに問題がありました。 jqueryの中で期待される結果の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

出典

2016-08-27 Giridharan

ねえ@Giridharanそれはあなただけ食品 –

テーブルにデータを追加するときは、新しい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>

出典

2016-08-27 12:41:18 reinierkors

のタグを開始逃したかもしれない。しかし、それは3タグを生成します。私は2つだけタグが必要です。あなたのコードを実行するには元のために取得しています：私の悪い@Giridharan アップルパイ5 – Giridharan

。終了タグがありませんでした。今すぐに作業する必要があります – reinierkors

-1

JS変更してくださいと怒鳴る

Jsのような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]); 
    } 
});

HTML：

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

出典

2016-08-27 12:47:57

私の提案は次のとおりです。

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

出典

2016-08-27 13:12:22 gaetanoM

ちょうどテキストの整列を表示するための部分のサイズを表示するためにCSSを適用する途中は素晴らしいですね。 –

これを試してみてください。

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

出典

2016-08-27 13:32:18 Ehsan

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

出典

2016-08-27 14:39:08 Developer

jqueryを使用してテーブルビューを動的に表示

答えて

関連する問題