Question

我正在编写一个使用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");
  });
});

CSS：

/*resets*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: ' ';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*EVERYTHING ELSE*/
td {
  background-color: white;
  border: 1px solid black;
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

table {
  min-width: 500px;
  max-width: 500px;
  min-height: 500px;
  max-height: 500px;
  border-collapse: collapse;
}

HTML：

<!DOCTYPE html>
<HTML>
  <HEAD>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </HEAD>
  <BODY>
    <button class="clearButton">RESET</button>
    <table>
    </table>
  </BODY>
</HTML>

提前致谢！

Answer 1

您将<td>追加到<table>，而不是将其追加到<row>。

以下是解决此问题的方法：

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

jsFiddle。

注意：我会通过给它一个灰色来使两个状态的边框同样可见。请参阅this version。

Answer 2

像这样更改脚本：

  $(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");
    });
});

请检查demo

Answer 3

您正在使用append方法，如果您没有提供标签，则自动关闭标记。你必须创建html字符串＆amp;然后附加到表格。你可以用这个

$(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");
  });
});

同时检查小提琴 https://jsfiddle.net/ok1n29ua/

Answer 4

首先，给你的td一些填充

td{padding:5px;}

其次，您需要在行内插入td，当前脚本在行之后插入它们：

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

第三，始终在js文件之前包含你的css文件：

如何摆脱HTML表格中行之间的空间？

4 个答案: