已解決430363個問題，去搜搜看，總會有你想問的

從 Javascript 數組生成動態 HTML 表格

首頁猿問從 Javascript...

從 Javascript 數組生成動態 HTML 表格

JavaScript

Qyouu 2022-12-22 13:03:04

我目前正在使用 php、javascript 和 html 制作一個網絡應用程序。我對 php 進行了一個 post http 調用，以從我的數據庫中獲取我必須在 html 表中顯示的信息。我從我的 post http 調用中得到以下數據：0:DwgFile: "\\TEAM\wwwroot\dwfs\A-104589 ELEVATOR FRAME ASS'Y.idw.dwf"DwgNo: "2A"IssueDate: "2020-05-30"IssueEMID: 10709ItemID: 232002ItemNo: "A-104589"OrderID: 13352Qty Total: 1ShortDesc: "ELEVATOR FRAME ASS'Y"SolidFile: "\\TEAM\wwwroot\dwfs\A-104589 ELEVATOR FRAME ASS'Y.iam.dwf"_DwgNo: 2__proto__: Object1:DwgFile: "\\TEAM\wwwroot\dwfs\A-104599 DRIVE SHAFT ASS'Y.idw.dwf"DwgNo: "3A"IssueDate: "2019-12-12"IssueEMID: 10710ItemID: 232012ItemNo: "A-104599"OrderID: 13352Qty Total: 1ShortDesc: "DRIVE SHAFT ASS'Y"SolidFile: "\\TEAM\wwwroot\dwfs\A-104599 DRIVE SHAFT ASS'Y.iam.dwf"_DwgNo: 3如何在 html 表的一行中顯示數組中的每個索引。數組中的每個屬性都是表中的一列。我需要表是動態的，因為數組中的索引數量會根據用戶的輸入而變化。任何幫助深表感謝。干杯!編輯這是表格應該類似于的內容

查看完整描述

1 回答

茅侃侃

TA貢獻1842條經驗獲得超22個贊

首先，使用 HTML 創建一個空表。

接下來，我們可以使用 jQuery 填充表格。

var data_from_post = ...

//create head by looping through keys of first object in result

var table_head = $('<tr></tr>').wrap('<thead></thead>');

$.each(data_from_post[0], function(key) {

table_head.append('<th>' + key + '</th>');

});

//create body by looping through each result, then looping through each key in that result

var table_body = $('<tbody></tbody>');

$.each(data_from_post, function(index, values) {

var row = $('<tr></tr>');

$.each(values, function(key, value) {

//here you can perform changes to the 'value' variable if you need it to be different in the table

//for example, wrap the `_DwgNo` with a button

if(key == '_DwgNo') {

value = '<button>' + value + '</button>'

}

row.append('<td>' + value + '</td>');

});

table_body.append(row);

});

//add the head and body to the table

$('#dynamic_table').append(table_head).append(table_body);

這是一個包含此解決方案的 jsfiddle

https://jsfiddle.net/2Lon5vj3/1/

反對回復 2022-12-22

1 回答
0 關注
104 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

從 Javascript 數組生成動態 HTML 表格

從 Javascript 數組生成動態 HTML 表格

1 回答

添加回答