Jquery 如何消除HTML表中行与行之间的空间？

我正在写一个小页面，它使用JQuery生成一个16x16表。然后，如果您将鼠标悬停在单元格上，它将改变颜色。我已经研究了很多关于这方面的问题，并尝试了很多方法，但它们都不起作用，所以我认为最直接的方法就是问我自己。这是我的密码：

JQuery：

$(document).ready(function() {
  for(var i = 0; i < 16; i++) {
    $('table').append('<tr>');
    for(var j = 0; j < 16; j++) {
      $('table').append("<td></td>");
    }
    $("table").append("</tr>");
  }
  $('td').hover(function() {
    $(this).css("background-color", "black");
  });
  $('.clearButton').click(function() {
    $('td').css("background-color", "white");
  });
});

HTML:

重置

---

提前谢谢

您正在将

附加到

，而不是将它们附加到

上

以下是修复此问题的方法：

$（文档）.ready（函数（）{
对于（变量i=0；i<16；i++）{
var tr=$（''）
对于（var j=0；j<16；j++）{
tr.append（$（''）；
}
$（“表”）。追加（tr）；
}
$（'td'）。悬停（函数（）{
$（this.css（“背景色”、“黑色”）；
});
$（'.clearButton'）。单击（函数（）{
$（'td'）.css（“背景色”、“白色”）；
});
});

---

注意：我会让边界在两个州都同样可见，给它一个灰色。请参阅。

您正在使用

append

方法，如果您没有提供标记，该方法将自动关闭标记。您必须创建html字符串&然后附加到表中。你可以用这个

$(document).ready(function() {
    var html = '';
    html += '<tbody>'
  for(var i = 0; i < 16; i++) {
    html += '<tr>';
    for(var j = 0; j < 16; j++) {
      html += "<td></td>";
    }
    html += "</tr>";
  }
  html += '</tbody>';
  $('table').append(html)
  $('td').hover(function() {
    $(this).css("background-color", "black");
  });
  $('.clearButton').click(function() {
    $('td').css("background-color", "white");
  });
});

$（文档）.ready（函数（）{
var html=''；
html+=''
对于（变量i=0；i<16；i++）{
html+=''；
对于（var j=0；j<16；j++）{
html+=“”；
}
html+=“”；
}
html+=''；
$（'table'）.append（html）
$（'td'）。悬停（函数（）{
$（this.css（“背景色”、“黑色”）；
});
$（'.clearButton'）。单击（函数（）{
$（'td'）.css（“背景色”、“白色”）；
});
});

还要检查小提琴

---

如下更改脚本：

  $(document).ready(function () {
    var content = '';
    for (var i = 0; i < 16; i++) {
        content += '<tr>';
        for (var j = 0; j < 16; j++) {
            content += '<td></td>';
        }
        content += '</tr>';
    }
    $('table').append(content);
    $('td').hover(function () {
        $(this).css("background-color", "black");
    });
    $('.clearButton').click(function () {
        $('td').css("background-color", "white");
    });
});

$（文档）.ready（函数（）{
var内容=“”；
对于（变量i=0；i<16；i++）{
内容+=''；
对于（var j=0；j<16；j++）{
内容+=''；
}
内容+=''；
}
$（'table'）。追加（内容）；
$（'td'）。悬停（函数（）{
$（this.css（“背景色”、“黑色”）；
});
$（'.clearButton'）。单击（函数（）{
$（'td'）.css（“背景色”、“白色”）；
});
});

---

请检查

首先，给你的td一些填充

td{padding:5px;}

第二，您需要在行内插入td，当前脚本会在行后插入td：

$('table').find('tr').eq(i).append("<td> </td>");

$（'table'）.find（'tr'）.eq（i）.append（“”）；

---

第三，总是在js文件之前包含您的css文件：

这并没有修复它，但这就是我的全部cssIf如果我使用开发工具并查看其中一个，它说我没有编写的唯一作用于它的css是“border collapse:collapse；”这是继承自table@ChrisHowes你的jQuery完全错了。请参阅更新的答案。这里有一把小提琴：@ChrisHowes，请注意，你应该把回答你的问题或最接近找到问题解决方案的答案标记为正确。而且，如果你觉得这些答案有用的话，没有人会阻止你投多个答案。

td{padding:5px;}

$('table').find('tr').eq(i).append("<td> </td>");