使用帶有數據元素的Javascript附加到HTML表

Question

我有四個陣列

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

等等

Answer 1

假設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>');
 });

Answer 2

你可以試試這個

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>");
} 

Answer 3

填充表主體的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> 

Answer 4

在這里您可以找到解決方案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> 

Answer 5

 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> 

Answer 6

將您的單個數組組合成一個數組並確定哪個數組最長然后遍歷該數組以生成行的方法

 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> 

Answer 7

在下面的示例中可以看到，有一種現代且相當優雅的方法可以使用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的長度可以是可變的，並可以根據您的需要進行調整。

另外，正如該答案的注釋中所指出的那樣，附加結束標記是一種非常不好的做法，因此上述代碼使用了一種更好的方法，即呈現整個表而不是僅呈現其內容和結束標記。