Question

在下面的示例HTML文件test.htm中，我有一个硬编码表，我正在尝试（重新）使用jQuery生成;到目前为止，我只是尝试重建两个标题行，但不幸的是它不起作用 - 这是我在Firefox中得到的：

基本上，我正在尝试在jQuery中执行类似的操作：

var row1 = $("#tblGen").append($('<tr>'));
row1.append( $('<th>').attr("rowspan","2").text('AA'));
...
var row2 = $("#tblGen").append($('<tr>'));
...
var tbody = $("#tblGen").append($('<tbody>'));
...

...意思是，我尝试创建行，然后填充它，然后填充另一行，然后tbody - 但我得到的是tbody首先有两个空tr s，然后th在tr之外。

所以我显然做错了什么 - 我做错了什么，我怎么能用jQuery生成示例表（只是前两个标题行就足够了，我猜）？

文件test.htm：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style type="text/css">
.tblTest,
.tblTest tr th,
.tblTest tr td {
  border-style: solid;
  border-color: #000;
  border-spacing: 0;
  border-collapse: collapse;
  padding: 4px;
  border-width: 1px;
  font: 12px helvetica,arial,sans-serif;
}
.tblTest tr th {
  background-color: #BBB;
}
.tdh { border-width: 2px; } /* NOWORK */
  </style>
  <!-- <script type="text/javascript" src="../jquery-1.12.3.min.js"></script> -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script type="text/javascript">
function GenerateTable() {
  $("#tblGen").html("");
  // compose the table headers (two rows)
  var numcolspan=3;
  var row1 = $("#tblGen").append($('<tr>'));
  row1.append( $('<th>').attr("rowspan","2").text('AA'));
  row1.append( $('<th>').attr("colspan",numcolspan).text('BB') );
  row1.append( $('<th>').attr("colspan",numcolspan).text('CC') );
  row1.append( $('<th>').attr("colspan",numcolspan).text('DD') );
  var row2 = $("#tblGen").append($('<tr>'));
  for(var ix=0; ix<3; ix++) { // loop three times
    row1.append( $('<th>').text('EE') );
    row1.append( $('<th>').text('FF') );
    row1.append( $('<th>').text('GG') );
  }
  var tbody = $("#tblGen").append($('<tbody>'));
}
ondocready = function() {
  GenerateTable();
}
$(document).ready(ondocready);
  </script>
</head>

<body>
  <h2>Table I want to create:</h2>

<table id="tblTested" class="tblTest">
  <tr>
    <th rowspan="2">AA</th>
    <th colspan="3" class="tdh">BB</th>
    <th colspan="3" class="tdh">CC</th>
    <th colspan="3" class="tdh">DD</th>
  </tr>
  <tr>
    <th>EE</th>
    <th>FF</th>
    <th>GG</th>
    <th>EE</th>
    <th>FF</th>
    <th>GG</th>
    <th>EE</th>
    <th>FF</th>
    <th>GG</th>
  </tr>
  <tbody id="TestTBody">
  <tr>
    <td>1</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>2</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Total</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  </tbody>
</table>

  <h2>Generated:</h2>
  <div id="divholder">
    <table id="tblGen" class="tblTest">
    </table>
  </div> <!-- divholder -->

</body>
</html>

Answer 1

以下是jsFiddle的简短描述。按一下按钮，然后检查DOM。这只是一个例子。

<强> JS

$('button').on('click', function() {
  var $tbody = $('<tbody/>');
  var $row1 = $('<tr/>');
  var $cell = $('<th/>');
  $cell.attr('rowspan', '2').text('AA');
  $("#tblGen").append($tbody.append($row1.append($cell)));
});

<强> HTML

<button>Click</button>
<table id="tblGen" class="tblTest"></table>

问题在于你这样做：

var row1 = $("#tblGen").append($('<tr>'));

然后row1将不是行，而是表本身。这就是你的元素附加在表格中的原因。

Answer 2

我可以看到的两个问题是，您无法附加部分HTML。您需要编译HTML然后append或更改innerHTML（使用.html()或其他内容）。请考虑以下代码：

<p><b>Hello <a href="#">link</a></b></p>

如果你这样做，结果会很疯狂：

$(el).append("<p>");
$(el).append("<b>");
$(el).append("<a href='#'>");
$(el).append("link");
$(el).append("</a>");
$(el).append("</b>");
$(el).append("</p>");

以上代码会给您带来完全不受欢迎的结果。你需要以不同的方式做到这一点：

html = "<p>";
html += "<b>";
html += "<a href='#'>";
html += "link";
html += "</a>";
html += "</b>";
html += "</p>";
$(el).append(html);

另一个关键问题是，当你使用类似的东西时

$(el).append("<p>");

以上将$(el)作为jQuery对象返回，而不是<p>。我想这是您的代码的基本问题。

使用jquery逐行生成表格？

2 个答案: