JQuery是一個JavaScript庫,它可以幫助我們簡化JavaScript操作。在本文中,我們將介紹如何使用JQuery為div元素創建表格樣式。
<div id="table"></div> <script> // 導入jquery庫 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> // 使用JQuery創建表格樣式 $(document).ready(function() { var tableData = [ ["Name", "Age", "Country"], ["Tom", "25", "America"], ["Jenny", "30", "Australia"], ["Mike", "35", "Canada"], ["Rose", "20", "China"] ]; var table = $("<table/>").addClass("table"); var tableHead = $("<thead/>"); var tableRow = $("<tr/>"); for (var i = 0; i< tableData[0].length; i++) { tableRow.append($("<th/>").text(tableData[0][i])); } tableHead.append(tableRow); table.append(tableHead); var tableBody = $("<tbody/>"); for (var i = 1; i< tableData.length; i++) { var tableRow = $("<tr/>"); for (var j = 0; j< tableData[i].length; j++) { tableRow.append($("<td/>").text(tableData[i][j])); } tableBody.append(tableRow); } table.append(tableBody); $("#table").append(table); }); </script>
上面的代碼創建了一個名為table的div元素,并使用JQuery為它創建了一個表格樣式。首先,我們定義了一個tableData變量,它包含表格中的數據。
然后,在準備好后,我們使用JQuery方法創建一個table元素,并給它添加一個名為table的class。接下來,我們創建一個tableHead變量并使用一個for循環將表頭中的列添加到tableRow變量中。這里,我們使用了JQuery的text()方法來添加文本內容。
之后,我們將tableRow添加到tableHead中,將tableHead添加到table中。接著,我們創建了一個tableBody變量,并使用另一個for循環將數據行添加到tableBody變量中。同樣,我們使用JQuery的text()方法來添加每個單元格的文本內容。
最后,我們將tableBody添加到table中,將table添加到名為table的div元素中。運行代碼后,我們將看到一個信息清晰的表格。