Question

我有两个用于放置高度和宽度的输入框，以及一个用Javascript创建表格的按钮。现在我想让每个单元格中的颜色在我悬停在它们上面时发生变化。最好用jQuery。

    function createTable(inRows, inCols) {
       var inRows = document.getElementById('height').value;
       var inCols = document.getElementById('length').value;

       var body = document.getElementsByTagName("body")[0];

           var tbl = document.createElement("table");
           var tblBody = document.createElement("tbody");

            for (var i = 0; i < inRows; i++) {
                var row = document.createElement("tr");

            for (var j = 0; j < inCols; j++) {
                var cell = document.createElement("td");
                row.appendChild(cell);
            }

            tblBody.appendChild(row);
        }

        tbl.appendChild(tblBody);
        body.appendChild(tbl);
    }   

$(document).ready(function() {
    $('td').hover(function() {
        $(this).addClass('black');
    });
});

在我虚弱的初学者心目中，这看起来是正确的。但是......不是。我是在正确的轨道上。我该如何实现呢？

Answer 1

我假设你正在使用CSS来设置表格的样式，因为你正在为你想要的悬停样式分配一个类吗？如果是这样，您可以使用纯CSS来实现这种效果：

td:hover {background: black;}

Answer 2

您正在调用文档就绪的事件处理程序绑定，但该表尚未准备好。只需将处理程序添加到createTable函数的末尾即可。我已将处理程序更改为mouseenter和mouseleave，因此当鼠标离开单元格（fiddle）时，将添加和删除该类。

我还使用了.on和事件委托，这意味着我只在表中添加一个（在本例中为两个）事件处理程序，它只会对单元格上的事件做出反应。这样，如果添加o删除单元格，事件处理程序将自动使用它们。

 function createTable(inRows, inCols) {
       var inRows = document.getElementById('height').value;
       var inCols = document.getElementById('length').value;

       var body = document.getElementsByTagName("body")[0];

       var tbl = document.createElement("table");
       var tblBody = document.createElement("tbody");

       for (var i = 0; i < inRows; i++) {
           var row = document.createElement("tr");

           for (var j = 0; j < inCols; j++) {
               var cell = document.createElement("td");
               row.appendChild(cell);
           }

           tblBody.appendChild(row);
       }

       tbl.appendChild(tblBody);
       // appends <table> into <body>
       body.appendChild(tbl);

       $(tbl).on('mouseenter', 'td', function () {
           $(this).addClass('black');
       });

       $(tbl).on('mouseleave', 'td', function () {
           $(this).removeClass('black');
       });
   }

使用jQuery在我的Javascript制作表上更改颜色？

2 个答案: