Question

我要求jQuery追加＆＃34; </tr><tr>＆＃34;但它插入＆＃34; <tr></tr>＆＃34;。为什么是这样？我知道我可以使用display: table-cell和table-row制作表格，但必须使用表格。提前谢谢。

Fiddle

＆＃13;

var colors = ["#FAE7D0", "#FEB186", "#935D37", "#483728", "#C57C23"];
var index;
for (index = 0; index < colors.length; index++) {
  indexRemain = index % 4;
  if (indexRemain === 0) {
    $(".color").append('</tr><tr>');
  }
  $(".color").append('<td><div name="' + colors[index] + '" style="background-color:' + colors[index] + ';" class="color-box">&nbsp;</div></td>');
}
if (indexRemain > 0) {
  do {
    indexRemain--;
    $(".color").append('<td>&nbsp;</td>');
  } while (indexRemain > 0);
  if (indexRemain > 0) {
    $(".color").append('</tr>');
  }
}

＆＃13;

.color-box {
  border: 3px solid black;
  width: 30px;
  height: 30px;
  margin: 0 2px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="color"></tr>
</table>

＆＃13;

Answer 1

问题是因为您只能一次附加整个元素。您当前的逻辑几乎就像是在尝试构建字符串，而不是创建DOM元素。

假设您想在表格的一行上存储5种颜色，可以试试这个：

var colors = ["#FAE7D0", "#FEB186", "#935D37", "#483728", "#C57C23", "#C00", "#0C0", "#00C", "#CC0"],
    rowCount = 5,
    $row;

for (var i = 0; i < colors.length; i++) {
    if (i == 0 || i % rowCount == 0)
        $row = $('<tr />').appendTo('table');

    $('<td><div style="background-color:' + colors[i] + ';" class="color-box"></div></td>').appendTo($row);
}

Example fiddle

请注意，我从name删除了div属性，因为它无效。

Jquery附加工作反向

1 个答案: