logo标签列表

用jQuery改变我用JavaScript创建的表格的颜色？

javascriptjqueryhtmlcolorshtml-table
4

我有两个输入框来输入高度和宽度，还有一个按钮用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');
    });
});

在我这个初学者的脑海中，这看起来是正确的。但是...它并不是正确的。 我是否走对了方向？如何实现它？

你能更具体地说明为什么不对吗？发生了什么？你收到了什么错误信息？ - banging
你不应该使用JavaScript来做这件事。CSS存在于这种情况下。 - dfsq
@dfsq - 看起来像是一个JavaScript/jQuery的学习练习，但意义依然重大。 - Ori Drori
@OriDrori 这道题里写着“最好用 jQuery 实现”？ - Callan Heard
是的，这是一个学习练习。我也尝试了CSS方式。很酷。 - Michael Krøyserth-Simsø
@CallanHeard 确实是这样的 :) - Ori Drori
2个回答
2

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

td:hover {background: black;}
1
您正在文档准备就绪时调用事件处理程序绑定，但表格尚未准备好。只需将处理程序添加到createTable函数的末尾即可。我已将处理程序更改为mouseenter和mouseleave，因此当鼠标离开单元格时，将添加和删除类（fiddle）。
我还使用了带有事件委托的.on，这意味着我仅向表格添加一个（在此情况下为两个）事件处理程序，并且它仅会对单元格上的事件做出反应。通过这种方式，如果您添加或删除单元格，则事件处理程序将自动处理它们。
 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');
       });
   }
谢谢您，先生。这太完美了！ - Michael Krøyserth-Simsø
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接