使用 Javascript 和 Data-elements 追加到 HTML 表中

我有四个数组

arrayOne['orange','blue','green','red','yellow','purple','gray','tan','pink','violet']
arrayTwo['1001','1003','3453','78934','2389','3','8934']
arrayThree['TV','phone','laptop']
arrayFour['1','2','3','4','5','6','7','8','9','10']

我正在用html制作表格

<table class="table table-striped">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>

我有一个脚本可以打开一个模式并附加到表中，我试图让它适用于两列，但它只用 ArrayOne 内容填充第一列

for (row = 0; row <$(this).data("arrayOne").length; row++ ){
$("#myModal").find(".table").append("<tr>
<td>"+$(this).data("arrayOne")[row]+"</td>"); 
for (j = 0; j <$(this).data("arrayTwo").length; j++ ){
$("#myModal").find(".table").append("<tr>
<td>"+$(this).data("arrayTwo")[j]+"</td></tr></tbody></table>");
} 
}

使用上面的代码，它只打印为

column1    column2    column 3    column 4
orange
blue
green
red
....
violet

最终结果应如下所示

column1    column2    column 3    column 4
orange     1001       TV          1
blue       1003       phone       2
green      3453       laptop      3
red        78934                  4
yellow     2389                   5

等等等等

假设arrayOne具有所有必需的行，而在其他数组上，行可能是空白的，您可以执行以下操作，

arrayOne.forEach(function(value, key){
let firstColumn = arrayOne[key],
secondColumn = arrayTwo[key]?arrayTwo[key]:"",
thirdColumn = arrayThree[key]?arrayThree[key]:"",
fourthColumn = arrayFour[key]?arrayFour[key]:"";
$("#myModal").find(".table").append('<tr><td>'+firstColumn+'</td><td>'+secondColumn+'</td><td>'+thirdColumn+'</td><td>'+fourthColumn+'</td></tr>');
});

填充表体的 jQuery 解决方案可以是：

var arrayOne = ['orange','blue','green','red','yellow','purple','gray','tan','pink','violet'];
var arrayTwo = ['1001','1003','3453','78934','2389','3','8934'];
var arrayThree = ['TV','phone','laptop'];
var arrayFour = ['1','2','3','4','5','6','7','8','9','10'];
for (var i = 0; i <arrayOne.length; i++ ){
var row = $('<tr/>').append($('<td/>', {text: arrayOne[i] || ''}))
.append($('<td/>', {text: arrayTwo[i] || ''}))
.append($('<td/>', {text: arrayThree[i] || ''}))
.append($('<td/>', {text: arrayFour[i] || ''}));
$('table tbody').append(row);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

在这里，您可以找到解决方案 https://jsfiddle.net/phru3m7s/1/

var arrayOne = ['orange','blue','green','red','yellow','purple','gray','tan','pink','violet'];
var arrayTwo = ['1001','1003','3453','78934','2389','3','8934'];
var arrayThree = ['TV','phone','laptop'];
var arrayFour = ['1','2','3','4','5','6','7','8','9','10'];
for(var i=0; i< arrayOne.length; i++){
	var tableString = "<tr>";
	tableString += "<td>" + arrayOne[i] + "</td>";
tableString += "<td>" + ((typeof arrayTwo[i] === 'undefined') ? '' : arrayTwo[i]) + "</td>";
tableString += "<td>" + ((typeof arrayThree[i] === 'undefined') ? '' : arrayThree[i])  + "</td>";
tableString += "<td>" + ((typeof arrayFour[i] === 'undefined') ? '' : arrayFour[i]) + "</td>";
tableString += "<tr>";

$('table tbody').append(tableString);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

var arrayOne = ['orange','blue','green','red','yellow','purple','gray','tan','pink','violet'];
var arrayTwo = ['1001','1003','3453','78934','2389','3','8934'];
var arrayThree = ['TV','phone','laptop'];
var arrayFour = ['1','2','3','4','5','6','7','8','9','10'];
//To test the longest array
var length_array = [];
length_array.push( arrayOne.length); 
length_array.push( arrayTwo.length); 
length_array.push( arrayThree.length); 
length_array.push( arrayFour.length); 
var maxLength = Math.max.apply( null, length_array );
for (var i = 0; i <maxLength; i++ ){
var row = $('<tr/>').append($('<td/>', {text: arrayOne[i] || ''}))
.append($('<td/>', {text: arrayTwo[i] || ''}))
.append($('<td/>', {text: arrayThree[i] || ''}))
.append($('<td/>', {text: arrayFour[i] || ''}));
$('table tbody').append(row);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

你可以试试这个

for (row = 0; row <$(this).data("arrayOne").length; row++ )
{
var valOne = ($(this).data("arrayOne")[row]!=null)?$(this).data("arrayOne")[row]:"";
var valTwo = ($(this).data("arrayTwo")[row]!=null)?$(this).data("arrayTwo")[row]:"";
var valThree = ($(this).data("arrayThree")[row]!=null)?$(this).data("arrayThree")[row]:"";
var valFour = ($(this).data("arrayFour")[row]!=null)?$(this).data("arrayFour")[row]:"";
$("#myModal").find(".table").append("<tr><td>"+valOne+"</td><td>"+valTwo+"</td><td>"+valThree+"</td><td>"+valFour+"</td></tr>");
}

将单个数组合并到一个数组中并确定哪个数组最长的方法，然后循环生成行

var arrayOne = ['orange', 'blue', 'green', 'red', 'yellow', 'purple', 'gray', 'tan', 'pink', 'violet'],
arrayTwo = ['1001', '1003', '3453', '78934', '2389', '3', '8934'],
arrayThree = ['TV', 'phone', 'laptop'],
arrayFour = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
var columns = [arrayOne, arrayTwo, arrayThree, arrayFour];
// start from longest column array
var rows = columns.reduce((a, c) => {
return c.length > a.length ? c : a;
}, [])
// map the longest to create all the rows
.map((_, rowIdx) => {
// map the cells for each row
var cells = columns.map(colArr => $('<td>',{text: colArr[rowIdx] || '' }));
// return new row and cells
return $('<tr>').append(cells);    
});

// append all the rows     
$('#myModal tbody').append(rows);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myModal">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

有一种现代且相当优雅的方法可以使用Array.prototype.reduce()来执行此操作，如以下示例所示：

var arrayOne = ['orange', 'blue', 'green', 'red', 'yellow', 'purple', 'gray', 'tan', 'pink', 'violet'];
var arrayTwo = ['1001', '1003', '3453', '78934', '2389', '3', '8934'];
var arrayThree = ['TV', 'phone', 'laptop'];
var arrayFour = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
var sumArray = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
var mergedArrays = [arrayOne, arrayTwo, arrayThree, arrayFour].reduce(function(sum, value, index) {
for (var key in sum) {
sum[key][index] = value[key];
}
return sum;
}, sumArray);
console.log(mergedArrays);
var htmlToRender = '<table class="table table-striped"><thead><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th></tr></thead><tbody>';
for (var key in mergedArrays) {
htmlToRender += '<tr><td>' + mergedArrays[key][0] + '</td>';
htmlToRender += '<td>' + mergedArrays[key][1] + '</td>';
htmlToRender += '<td>' + mergedArrays[key][2] + '</td>';
htmlToRender += '<td>' + mergedArrays[key][3] + '</td></tr>';
}
htmlToRender += '</tbody></table>';
$("#myModal").append(htmlToRender);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myModal">
</div>

解释

您实际上创建一个空的对象数组，然后将现有数组的值累积为具有 4 个值的对象。完成所有这些操作后，您可以循环访问对象数组，并在表中为数组中的每个对象写入一个新行。

对于更复杂的情况，可以轻松扩展和调整代码。此外，sumArray的长度可以根据您的需要进行调整。

此外，正如本答案的注释中所指出的，附加结束标签是一种非常糟糕的做法，因此上面的代码使用更好的代码，呈现整个表，而不仅仅是其内容和结束标签。

解释

相关内容

最新更新

热门标签：