亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

javascript在一張表中循環數組和對象數據

javascript在一張表中循環數組和對象數據

慕虎7371278 2023-10-30 10:51:02
我有數組和對象數據,我想將它們一起調用。var data = [{"number": "PA1234","name": "John"},{"number": "JM344","name": "jessi"},{"number": "ML567","name": "Monty"}];var costing= {"cost": 10,"cost": 20,"cost": 30,};表格中的顯示格式<pre><table><tr><td>number</td><td>name</td><td>cost</td></tr></table><pre>到目前為止我已經完成了,但不知道如何調用對象成本計算var records=$("<table/>").attr("id","tabs");$("#table").append(records);for(var j=0;j<data .length;j++){  var tr="<tr>";  var td1="<td>"+data [j]["number"]+"</td>";  var td2="<td>"+data [j]["name"]+"</td>";  $("#tabs").append(tr+td1+td2+td3); }
查看完整描述

2 回答

?
慕森卡

TA貢獻1806條經驗 獲得超8個贊

<!DOCTYPE html>

<html>

    <head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <title>


        </title>

        <style>

            #t, tr, th, td{

                border: 1px solid black;

            }

        </style>

    </head>

    <body>

        <table id="t" cellpadding="10">

            <tr>

                <th>

                    Number

                </th>

                <th>

                    Name

                </th>

                <th>

                    Cost

                </th>

            </tr>

        </table>

    </body>

    <script>

        var number = ['PA1234', 'JM344', 'ML567'], name = ['John', 'Jessi', 'Monty'], costing = [30, 30, 30];

        for(var i=0;i<3;i++) {

            $("#t").append('<tr><td>' + number[i] + '</td><td>' + name[i] + '</td><td>' + costing[i] + '</td></tr>');

        }

    </script>

</html>


查看完整回答
反對 回復 2023-10-30
?
largeQ

TA貢獻2039條經驗 獲得超8個贊

必須改變你的第二個對象的一些東西,成本。我不認為你可以在不同的值上使用相同的鍵名稱,你將無法迭代它們?,F在您可以采取兩種方法:


 var data = [

    {"number": "PA1234","name": "John"},

    {"number": "JM344","name": "jessi"},

    {"number": "ML567","name": "Monty"}

];


var costing = {

"cost0": 10,

"cost1": 20,

"cost2": 30,

};


document.addEventListener("DOMContentLoaded", () => {


    const place = document.getElementById("place").firstElementChild

    const table = document.createElement("table")


    for(let i = 0; i < data.length; i++){

        let tr = document.createElement("tr")


        let tdNumber = document.createElement("td")

        let tdName = document.createElement("td")

        let tdCost = document.createElement("td")


        tdNumber.innerText = data[i].number

        tdName.innerText = data[i].name

        tdCost.innerText = costing["cost"+i]


        tr.appendChild(tdNumber)

        tr.appendChild(tdName)

        tr.appendChild(tdCost)


        table.appendChild(tr)



    } 


    place.appendChild(table)


})

但就我個人而言,我會將您的成本核算對象更改為:


 var costing2 = [

    10,20,30

]

并將 for 循環更改為:


for(let i = 0; i < data.length; i++){

    let tr = document.createElement("tr")


    let tdNumber = document.createElement("td")

    let tdName = document.createElement("td")

    let tdCost = document.createElement("td")


    tdNumber.innerText = data[i].number

    tdName.innerText = data[i].name

    tdCost.innerText = costing2[i]


    tr.appendChild(tdNumber)

    tr.appendChild(tdName)

    tr.appendChild(tdCost)


    table.appendChild(tr)



其中place是div標簽在html中的位置。這不是最好的解決方案,但它可以工作,如果你想要的話,也可以寫下 html 代碼:


<html>

    <head>

        <script src="./file.js"></script>

    </head>


    <body>

        <div id="place">

            <pre>


            </pre>

        </div>


    </body>

</html>


查看完整回答
反對 回復 2023-10-30
  • 2 回答
  • 0 關注
  • 192 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號