首页h5加jq写table ，列：提单号/运单号、一程日期、二程日期、预计到货日期、海船公司、船名航次、放箱日期、放箱单上传

h5加jq写table ，列：提单号/运单号、一程日期、二程日期、预计到货日期、海船公司、船名航次、放箱日期、放箱单上传

时间: 2023-07-10 21:29:38 浏览: 112

您可以使用HTML5和jQuery来创建表格并填充数据。以下是一个示例代码，其中包含您提到的列： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <table id="myTable"> <thead> <tr> <th>提单号/运单号</th> <th>一程日期</th> <th>二程日期</th> <th>预计到货日期</th> <th>海船公司</th> <th>船名航次</th> <th>放箱日期</th> <th>放箱单上传</th> </tr> </thead> <tbody> <tr> <td>12345</td> <td>2022-01-01</td> <td>2022-01-05</td> <td>2022-01-10</td> <td>COSCO</td> <td>COSCO SHIPPING KILIMANJARO V.010E</td> <td>2022-01-15</td> <td><a href="#">upload_file.pdf</a></td> </tr>  </tbody> </table> <script> // jQuery代码用于填充表格数据 $(document).ready(function() { // 定义数据 var data = [ { "提单号/运单号": "12345", "一程日期": "2022-01-01", "二程日期": "2022-01-05", "预计到货日期": "2022-01-10", "海船公司": "COSCO", "船名航次": "COSCO SHIPPING KILIMANJARO V.010E", "放箱日期": "2022-01-15", "放箱单上传": "upload_file.pdf" } // 可以添加更多数据 ]; // 填充表格数据 $.each(data, function(index, value) { var row = $("<tr>"); $.each(value, function(key, value) { $("<td>").text(value).appendTo(row); }); row.appendTo("#myTable tbody"); }); }); </script> </body> </html> ``` 您可以将数据添加到`data`数组中，然后使用jQuery `$.each`方法遍历数据并将其添加到表格中。这将生成与之前jq的输出格式相同的表格。您可以根据需要修改数据来创建自己的表格。

阅读全文