javascript - 在简单的 HTML/JavaScript 元素中抽动 TABLE

Question

我正在学习一个简单的 JavaScript 谜题，你必须在棋盘上放置八个皇后，这样两个皇后就不会互相攻击。以下是快照。

问题:每当将皇后放置在未被占用的列中时，该列就会抖动一两个像素。如何通过固定列宽来解决此问题？女王形象的 SVG 图像明显小于 60 px。我的 CSS 在下面。

我还应该显示我的 JavaScript 和 HTML 文件吗？ Here是我的 Google 云端硬盘 (17 KB) 上的文件。

请注意，我可以在某个地方上传完整的元素并从那里运行/链接它吗？

table {
    width: 480px;
    border-collapse: collapse;
}

tr {
    height: 60px;
}

td {
    width: 60px;
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
}

Answer 1

棋盘和皇后位置只能用 jQuery 和 SVG 编写。这是一个简单的示例(没有皇后逻辑，因此您可以在每个单元格上放置一个皇后)。

更新:在 IE9、Firefox 和 Chrome 上测试(2014 年 10 月)

jQuery('svg').on('click', function(e) {
  console.log("x,y: ", e.pageX, ',', e.pageY);
  // determine position of nearest square, top left cell of 48px square starts at ccoordinates (9,9), 
  var cols = parseInt((e.pageX- 9) / 48);
  var rows = parseInt((e.pageY- 9) / 48);
  var cell_id =  cols+'_'+rows;  

   if ((cols < 8) && (rows < 8) && (jQuery('#'+cell_id).length == 0) ){
    jQuery('#cell_location').text('('+cols+','+rows+')');
    // insert an image in that cell
    var queen = document.createElementNS("http://www.w3.org/2000/svg", "use");
    queen.setAttributeNS(null, "id", cell_id);
    queen.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#queen");
    queen.setAttributeNS(null, "x", (cols*48) + 1);
    queen.setAttributeNS(null, "y", (rows*48) + 1);
    jQuery('svg').append(queen);
   } 
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg viewBox="0 0 450 450" height="450" width="450" xml:space="preserve" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
  
  <defs>
      <g id="queen" style="opacity:1; fill:#ffffff; fill-opacity:1; fill-rule:evenodd; stroke:#000000; stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;">
    <path
      d="M 9 13 A 2 2 0 1 1  5,13 A 2 2 0 1 1  9 13 z"
      transform="translate(-1,-1)" />
    <path
      d="M 9 13 A 2 2 0 1 1  5,13 A 2 2 0 1 1  9 13 z"
      transform="translate(15.5,-5.5)" />
    <path
      d="M 9 13 A 2 2 0 1 1  5,13 A 2 2 0 1 1  9 13 z"
      transform="translate(32,-1)" />
    <path
      d="M 9 13 A 2 2 0 1 1  5,13 A 2 2 0 1 1  9 13 z"
      transform="translate(7,-4.5)" />
    <path
      d="M 9 13 A 2 2 0 1 1  5,13 A 2 2 0 1 1  9 13 z"
      transform="translate(24,-4)" />
    <path
      d="M 9,26 C 17.5,24.5 30,24.5 36,26 L 38,14 L 31,25 L 31,11 L 25.5,24.5 L 22.5,9.5 L 19.5,24.5 L 14,10.5 L 14,25 L 7,14 L 9,26 z "
      style="stroke-linecap:butt;" />
    <path
      d="M 9,26 C 9,28 10.5,28 11.5,30 C 12.5,31.5 12.5,31 12,33.5 C 10.5,34.5 10.5,36 10.5,36 C 9,37.5 11,38.5 11,38.5 C 17.5,39.5 27.5,39.5 34,38.5 C 34,38.5 35.5,37.5 34,36 C 34,36 34.5,34.5 33,33.5 C 32.5,31 32.5,31.5 33.5,30 C 34.5,28 36,28 36,26 C 27.5,24.5 17.5,24.5 9,26 z "
      style="stroke-linecap:butt;" />
    <path
      d="M 11.5,30 C 15,29 30,29 33.5,30"
      style="fill:none;" />
    <path
      d="M 12,33.5 C 18,32.5 27,32.5 33,33.5"
      style="fill:none;" />
  </g>
    </defs>
<g id="gridlines"><path stroke="#d7d7d7" stroke-opacity="1" stroke-dasharray="3,3" shape-rendering="geometricPrecision" d="M0,0 L0,384 M48,0 L48,384 M96,0 L96,384 M144,0 L144,384 M192,0 L192,384 M240,0 L240,384 M288,0 L288,384 M336,0 L336,384 M0,0 L384,0 M0,48 L384,48 M0,96 L384,96 M0,144 L384,144 M0,192 L384,192 M0,240 L384,240 M0,288 L384,288 M0,336 L384,336 "/><path stroke="#00f50f" stroke-dasharray="3,3" shape-rendering="geometricPrecision" d="M0,0 L0,384 M384,0 L384,384 M0,0 L384,0 M0,384 L384,384 "/></g>
  <text alignment-baseline="baseline" text-anchor="start" id="cell_location" x="400" y="30">Hello</text>
</svg>