循环遍历数组并以表格样式显示结果

Loop through array and display result in table style

本文关键字：样式 显示 结果 表格 遍历 数组 循环      更新时间：2023-09-26

我有以下数组：

var arr = ['1---William---Developer', '2---Winston---Staff', '3---Thomson---Admin'];

我想拆分它并分配给表。

例：

<tr>
    <td>1</td>
    <td>William</td>
    <td>Developer</td>
</tr>
<tr>
    <td>2</td>
    <td>Winston</td>
    <td>Staff</td>
</tr>
<tr>
    <td>3</td>
    <td>Thomson</td>
    <td>Admin</td>
</tr>

这是我尝试过的代码

var a = "";
 var b = "";
 for (i = 0; i < worker_row_array.length; i++) { 
     var row_item = worker_array[i];
     var row = "<tr>";
     var worker_item_array = row_item.split("---");
     for (var s = 0; s < worker_item_array.length; s++) {
         column_item = worker_array_list[s];
         b += "<td>"+column_item+"</td>";
     }
    a += b.concat("</tr>");
}
您需要像

定义数组一样命名数组

我重用了您的原始代码：

var  worker_row_array = ['1---William---Developer', '2---Winston---Staff', '3---Thomson---Admin'];
var a = "";
for (i = 0; i < worker_row_array.length; i++) { 
     var row_item = worker_row_array[i];
     var row = "<tr>";
     var worker_item_array = row_item.split("---");
     for (var s = 0; s < worker_item_array.length; s++) {
         column_item = worker_item_array[s];
         row += "<td>"+column_item+"</td>";
     }
     a += row+"</tr>";
}
a = "<table>"+a+"</table>";
console.log(a);
document.getElementById("workers").innerHTML=a;
<div id="workers"></div>

试试这个小提琴

 var arr = ['1---William---Developer', '2---Winston---Staff', '3---Thomson---Admin'];
var html = "";
for ( var counter = 0; counter < arr.length; counter++)
{
 var columns = arr[ counter ].split( "---" );
 console.log(columns);
 html += "<tr>";
 columns.forEach( function(value){ 
    console.log(value); 
    html += "<td>" + value + "</td>"; 
    } );
 html += "</tr>";
 console.log( html );
}
document.body.innerHTML += "<table>" + html + "</table>";
相关文章：