卡卡網(wǎng)

jQuery使用Array中的數(shù)據(jù)添加動(dòng)態(tài)表：本文將介紹如何使用jQuery從Array變量動(dòng)態(tài)創(chuàng)建HTML表。這意味著使用jQuery在運(yùn)行時(shí)將列、行和數(shù)據(jù)動(dòng)態(tài)添加到HTML表。 您還可以查看上一篇有關(guān)jQuery表的文章，例如如何在jQuery中刪除表行tr。

jQuery使用Array數(shù)組數(shù)據(jù)創(chuàng)建動(dòng)態(tài)HTML表

Array數(shù)組代碼：

這里我們有一個(gè)帶有一些數(shù)據(jù)的數(shù)組變量，即bookDetails，用于綁定到HTML表。 我們有一個(gè)簡(jiǎn)單的數(shù)組，用于存儲(chǔ)書籍ID、書名和作者。

var bookDetails=[];
bookDetails.push(["Book Id","Book Title", "Author"]);
bookDetails.push(["1","Mein Kampf ", "Adolf Hitler"]);
bookDetails.push(["2","Relativity: The Special and the General Theory", "Albert Einstein"]);
bookDetails.push(["3","Think and Grow Rich" , "Napoleon Hill"]);
bookDetails.push(["4","The Art of Public Speaking", "Dale Carnegie"]);
bookDetails.push(["5","Tales of Secret Egypt", "Sax Rohmer"]);
bookDetails.push(["6","The Fakir" , "BHARUCHA"]);
bookDetails.push(["7","Code Name God"," Mani Bhaumick"]);

Html標(biāo)記：

添加HTML按鈕標(biāo)記和div標(biāo)記，其中div標(biāo)記將是動(dòng)態(tài)生成的表的父容器。

<button id="btnGenerateTable">Generate Table</button>
<br>
<div id="parentHolder">
</div>

jQuery代碼：

現(xiàn)在這里是代碼的主要部分，我們將使用jQuery動(dòng)態(tài)生成HTML表。

$("#btnGenerateTable").on('click', function (e) {
  e.preventDefault();
  var parentDiv = $("#parentHolder");
  parentDiv.html("");
  var aTable = $("<table>", {
    "id": "newTable"
  }).appendTo(parentDiv);
  var rowCount = bookDetails.length;
  var colmCount = bookDetails[0].length;

  //添加table頭部行 th
  for (var k = 0; k < 1; k++) {
    var fragTrow = $("<tr>", {
      "class": "trClass"
    }).appendTo(aTable);
    for (var j = 0; j < colmCount; j++) {
      $("<th>", {
        "class": "thClass"
      }).prependTo(fragTrow).html(bookDetails[k][j]);
    }
  }

  //為動(dòng)態(tài)table添加td數(shù)據(jù)
  for (var i = 1; i < rowCount; i < i++) {
    var fragTrow = $("<tr>", {
      "class": "trClass"
    }).appendTo(aTable);
    for (var j = 0; j < colmCount; j++) {
      $("<td>", {
        "class": "tdClass"
      }).appendTo(fragTrow).html(bookDetails[i][j]);
    }
  }
});

execcodegetcode

這就是使用jQuery創(chuàng)建動(dòng)態(tài)HTML表的方法。

標(biāo)簽: JQuery  table