jQuery如何更改一个的类<；td>；基于另一个的id<；td>；_Jquery_Html Table

jQuery如何更改一个的类<；td>；基于另一个的id<；td>；

jquery

jQuery如何更改一个的类<；td>；基于另一个的id<；td>；,jquery,html-table,Jquery,Html Table,我有两个表，当我将鼠标悬停在表2中的另一个单元格上时，我想突出显示表1中的一个单元格。不知道怎么从这里到那里。我想我应该从表2中获取id，并在表1中查找相同的id，然后添加highlight类 <!DOCTYPE html> <html> <head> <style> .cell { background-color:#FFCC00 } .cell-highlight { background-color:green }

我有两个表，当我将鼠标悬停在表2中的另一个单元格上时，我想突出显示表1中的一个单元格。不知道怎么从这里到那里。我想我应该从表2中获取id，并在表1中查找相同的id，然后添加highlight类

<!DOCTYPE html> 
<html> 
<head> 
  <style> 
.cell {    background-color:#FFCC00 } 
.cell-highlight {    background-color:green } 
</style> 
  <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 

<table border='1' id='table-1'>
    <tr>
        <td class='cell' id='cell-0-0'>Cell 0,0</td><td class='cell' id='cell-0-1'>Cell 0,1</td>
    </tr>
    <tr>
        <td class='cell' id='cell-1-0'>Cell 1,0</td><td class='cell' id='cell-1-1'>Cell 1,1</td>
    </tr>
</table>
<br/>
<table border='1' id='table-2'>
    <tr>
        <td class='cell' id='t2cell-0-0'>2 Cell 0,0</td><td class='cell' id='t2cell-0-1'>2 Cell 0,1</td>
    </tr>
    <tr>
        <td class='cell' id='t2cell-1-0'>2 Cell 1,0</td><td class='cell' id='t2cell-1-1'>2 Cell 1,1</td>
    </tr>
</table>
<script> 
  var id;
  $("td.cell").mouseover(function() { 
    id=$(this).find("id");
    $(this).addClass('cell-highlight' ); 
  }).mouseout(function() { 
    $(this).removeClass('cell-highlight' ); 
  }); 

</script> 

</body>


.cell{背景色：#FFCC00}
.cell高亮显示{背景色：绿色}
单元格0,0单元格0,1
单元格1,0单元格1,1


2单元0,02单元0,1
2单元1,02单元1,1
变量id；
$（“td.cell”）.mouseover（函数（）{
id=$（this.find（“id”）；
$（this.addClass（'cell-highlight'）；
}).mouseout（函数（）{
$（this.removeClass（'cell-highlight'）；
});

对您的代码进行以下更改

$("td.cell").mouseover(function() { 
    id=$(this).attr("id");
    $(this).addClass('cell-highlight' ); 
    secondid = "#t2"+id;
    $(secondid).addClass('cell-highlight');
  }).mouseout(function() { 
    $(this).removeClass('cell-highlight' );
    id=$(this).attr("id");
    secondid = "#t2"+id;
    $(secondid).removeClass('cell-highlight'); 
});

对代码进行以下更改

$("td.cell").mouseover(function() { 
    id=$(this).attr("id");
    $(this).addClass('cell-highlight' ); 
    secondid = "#t2"+id;
    $(secondid).addClass('cell-highlight');
  }).mouseout(function() { 
    $(this).removeClass('cell-highlight' );
    id=$(this).attr("id");
    secondid = "#t2"+id;
    $(secondid).removeClass('cell-highlight'); 
});

您可以使用jQuery的index和eq函数来标识高亮显示单元格在表1中的位置。然后在表2中镜像此选择

您需要更改您的ID才能生效。ID不能以数字开头。IE似乎不介意：-）。我会的。@jfriend00-在HTML5中，ID可以以数字开头@mrtsherman-为什么在旧浏览器中运行时会给自己带来潜在的问题？没有理由增加这种潜在的复杂性。用一个字母开始ID，然后你就不必担心兼容性问题，但很高兴知道他们在HTML5中解决了这个问题。@jfriend00-我没有说他不应该只是说他可以。让人们意识到不推荐的规则有助于促使人们理解使用新技术，而不是陷入旧东西的泥潭。您需要更改ID以使其有效。ID不能以数字开头。IE似乎不介意：-）。我会的。@jfriend00-在HTML5中，ID可以以数字开头@mrtsherman-为什么在旧浏览器中运行时会给自己带来潜在的问题？没有理由增加这种潜在的复杂性。用一个字母开始ID，然后你就不必担心兼容性问题，但很高兴知道他们在HTML5中解决了这个问题。@jfriend00-我没有说他不应该只是说他可以。让人们意识到不推荐的规则有助于促使人们理解使用新技术，而不是陷入旧东西的泥潭。此外，承认@jfriend00在其评论中提到的内容，避免以数字开头ID，并对上面的代码进行必要的更改。这是一种享受。一旦我修复了代码中函数的大小写。我讨厌区分大小写的代码。另外，承认@jfriend00在他的评论中提到的内容，避免以数字开头ID，并对上面的代码进行必要的更改。这是一种享受。一旦我修复了代码中函数的大小写。我讨厌区分大小写的代码。好主意。但我不确定每个表的行数和列数是否相等，我喜欢JSFIDLE站点。PS：修复了您的代码，因此它删除了活动类。@Martlark-是的，我非常喜欢JSFIDLE。它清晰地分隔了您的代码html/css/js。另外，您可以快速获取与其他人相同的jQuery库，这是一个好主意。但我不确定每个表的行数和列数是否相等，我喜欢JSFIDLE站点。PS：修复了您的代码，因此它删除了活动类。@Martlark-是的，我非常喜欢JSFIDLE。它清晰地分隔了您的代码html/css/js。另外，您可以快速获取与其他人相同的jQuery库，这是非常棒的。