Question

我正在尝试在页面上动态调整表格列的大小。在FF和Chrome中一切正常，但（像往常一样）它似乎在Internet Explorer中破解。经过大量的调试后，我发现问题是由于当你处理表时，JQuery选择器在Internet Explorer中无法正常工作。看来，如果您尝试在多行表中选择一列，JQuery将只选择第一列。这是一些可以显示问题的快速代码。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("td#2").css('background-color', 'red');  
});
</script>
</head>

<body>
<table>
<tbody>
<tr><td id="1">1</td><td id="2">2</td></tr>
<tr><td id="1">1</td><td id="2">2</td></tr>
</tbody>
</table>
</body>
</html>

您会注意到在IE中，只突出显示第一个“2”。它应该（如果我理解我自己的代码正确）突出显示2的两个。有关解决方法的任何想法吗？

Answer 1

使用class和$("td.2")，或者使用{{3>而不是ID（必须唯一，当前问题）像这样：

$(document).ready(function(){
  $("td:nth-child(2)").css('background-color', 'red');  
});

通过这种方式，您的标记变得更加简单：

<table>
    <tbody>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>1</td><td>2</td></tr>
    </tbody>
</table>

:nth-child() - 并进行比较，You can test it out here。

Internet Explorer中的JQuery - 选择表列

1 个答案: