javascript - 使用jquery动态扩展表

Question

我正在尝试制作一个表 GUI，它返回用户选择的行和列号。这是我到目前为止所拥有的:

HTML

<div id="target">
  <table>

  </table>
</div>

CSS

#target td {
  min-width: 20px;
  width: 20px;
  min-height: 20px;
  height: 20px;
  border: 1px solid black;
}

td.selected {
  background-color: blue;
}

Javascript

    $(document).ready(function() {
  createTable(5, 5);
});

function createTable(rows, cols) {
  var minRows = 5,
    minCols = 5;

  rows = (rows < minRows) ? minRows : rows;
  cols = (cols < minCols) ? minCols : cols;
  var $table = $("<table><tbody></tbody></table>");

  for (var i = 1; i <= rows; i++) {
    var $tr = $("<tr />");
    for (var j = 1; j <= cols; j++) {
      var $td = $("<td />");
      $tr.append($td);
    }
    $table.append($tr);
  }

  $("#target table").replaceWith($table);
  bind();
}

function bind() {
  $("table td").hover(function() {
    var minCols = 5,
      minRows = 5;

    var col = $(this).index();
    var row = $(this).parent().index();

    createTable(row + 2, col + 2);

    $("table td").removeClass("selected");
    var $trs = $("table tr");
    $trs.slice(0, row + 1).each(function(i, tr) {
      if (i > row)
        return false;
      $(tr).find("td").slice(0, col + 1).addClass("selected");
    });
  });
  $("#target").mouseleave(function() {
    console.log("left");
    createTable(5, 5);
  });
  $("table").on("click", "td", function() {
    var col = $(this).index();
    var row = $(this).parent().index();
    console.log(row + ", " + col);
  });
}

fiddle

https://jsfiddle.net/shirandror/efr7dkxL/

所以我在这段代码中遇到了两个问题。首先，当点击 TD 时，不会触发点击事件。其次，当鼠标离开包装 div 时， mouseleave 事件会被调用数百次。我在这里缺少什么？

Answer 1

将 $("table td").hover(function() { 更改为 $("table td").on("mouseenter", function() { >

请检查:https://jsfiddle.net/efr7dkxL/12/

jQuery

var minCols = 5,
    minRows = 5;

$(document).ready(function() {
    createTable(5, 5);
});

function createTable(rows, cols) {

    rows = (rows < minRows) ? minRows : rows;
    cols = (cols < minCols) ? minCols : cols;
    var $table = $("<table><tbody></tbody></table>");

    for (var i = 1; i <= rows; i++) {
        var $tr = $("<tr />");
        for (var j = 1; j <= cols; j++) {
            var $td = $("<td></td>");

            $tr.append($td);
        }
        $table.append($tr);
    }

    $("#target table").replaceWith($table);

    bind();
}

function bind() {

    $("table td").on("mouseenter", function() {

        var col = $(this).index();
        var row = $(this).parent().index();

        var $trs = $("table tr");
        var $tds = $trs.first().children("td");
        if (($trs.length != (row + 2) && ((row + 2) >= minRows)) || ($tds.length != (col + 2) && ((col + 2) >= minCols))) {
            createTable(row + 2, col + 2);
        }
        $trs = $("table tr");
        $("table td").removeClass("selected");

        $trs.slice(0, row + 1).each(function(i, tr) {
            if (i > row)
                return false;
            $(tr).find("td").slice(0, col + 1).addClass("selected");
        });

    });
    $("#target").off("mouseleave");
    $("#target").mouseleave(function() {
        createTable(5, 5);
    });

}

$(document).on("click", "table td", function() {
    var col = $(this).index();
    var row = $(this).parent().index();
    console.log((row + 1) + "," + (col + 1));
    $('.msg').text('ROW: ' + (row + 1) + ' and COL: ' + (col + 1));
});