您好，我这边试了下，效果如下，不知道是不是你想要的！
如有帮助，点击个采纳！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Table</title>
<style>
table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<script>
// Assuming your data is stored in a variable named responseData
const responseData = {
"tableHeader": [],
"totalPages": 1,
"totalRows": 4,
"pageNo": 1,
"rows": [
{
"grid_bookmark": "0",
"LAY_CHECKED": false,
"sex": "男",
"name": "zhangshan",
"row_pkValue": 22,
"age": 11
},
{
"grid_bookmark": "0",
"LAY_CHECKED": false,
"sex": "男",
"name": "zhangshan",
"row_pkValue": 24,
"age": 11
},
{
"grid_bookmark": "0",
"LAY_CHECKED": false,
"sex": "女",
"name": "lisi",
"row_pkValue": 21,
"age": 22
},
{
"grid_bookmark": "0",
"LAY_CHECKED": false,
"sex": "女",
"name": "lisi",
"row_pkValue": 23,
"age": 22
}
],
"params": {},
"jqgrid": true,
"bookmarks": []
};
// Function to dynamically generate the table
function generateTable(data) {
const table = document.createElement('table');
const tbody = document.createElement('tbody');
// Select specific columns (name, age, sex)
const columns = ['name', 'age', 'sex'];
// Create data rows
columns.forEach(column => {
const tr = document.createElement('tr');
const th = document.createElement('th');
th.textContent = column;
tr.appendChild(th);
data.rows.forEach(rowData => {
const td = document.createElement('td');
td.textContent = rowData[column];
tr.appendChild(td);
});
tbody.appendChild(tr);
});
// Append tbody to the table
table.appendChild(tbody);
// Append the table to the body or any other container element
document.body.appendChild(table);
}
// Call the function with your data
generateTable(responseData);
</script>
</body>
</html>
