2

我尝试使用 JavaScript 更改表中行的背景，但它不起作用。这是我的代码。但是，我尝试使用 html 及其工作创建一个表。PS：我想使用 webkit。

代码 ：

var table = document.getElementById("tab");
var rowCount = table.rows.length;


for(var i=0;i<6;i++) {     
   row = table.insertRow(rowCount);
   row.id = "row"+i;
   cell1 = row.insertCell(0);
   var content = document.createElement("output");                
   content.innerHTML = i ;
   cell1.appendChild(content);
   rowCount++;
}


 $(document).ready(function(){
        $('td').each(function(i) {     
             $('#tab').on('click', '#row'+i, function(){
                document.getElementById("row"+i).style.background = 'white';
                 //alert(i);
             });   
        });   

     //example2
     $('#td1').on('click', function(){
                document.getElementById("td1").style.background = 'white';
             });   
 });
4

5 回答 5

2

您遇到的问题是因为您在 上设置背景渐变TD，然后在TR. 由于 TD 在 TR 内，您只是看不到您的更改被应用。

于 2012-12-19T17:02:13.827 回答
2

您不应该在循环中分配事件处理程序，尤其是当您不需要时：

$('#tab').on('click', 'tr', function () {
    $('td,th', this).css('background', 'white');
});

小提琴。

于 2012-12-19T17:06:50.083 回答
1

它是背景颜色，而不是背景。

于 2012-12-19T16:58:59.867 回答
1

第一个问题是关闭问题......

Click 事件将始终指向i 的最后一个实例。

将您的代码更改为此

$('td').each(function(i) {
     (function(num) {
        $('#tab').on('click', '#row' + num, function() {
           document.getElementById("row" + num).style.background = '';
          //alert(i);
        });
     })(i)
 });

这可能不是非功能代码的主要原因..

于 2012-12-19T17:06:09.727 回答
0

你想改变整行或当前单元格的颜色吗？您当前的选择器仅适用于特定单元格。

// for the complete row
$(document).ready(function(){
    $('td').on('click',function(){
        $(this).closest('tr').find('td').css({'background':'red'});
    });
}); 

// or for the active cell..
$(document).ready(function(){
    $('td').on('click',function(){
        $(this).css({'background':'red'});
    });
});

有关行解决方案，请参阅此小提琴http://jsfiddle.net/axelmichel/2KUCz/。如果您希望每个表具有不同的行为，您可以修改选择器：

$('#tab').find.('td').on('click',...
于 2012-12-19T17:10:41.560 回答