可变长度< td> IE9 [英] variable length <td> IE9
问题描述
在< div >中有一个< table >。
每行可能包含一个或两个< td >
第一个< td 将始终包含一些左对齐的文本。
两行< td 被禁用，点击它们什么都不会做。
一行< td >附有onClick功能。
我希望那一个< td 扩展div的整个宽度，所以如果你点击它（在左对齐的文本上，在中间的空白部分或在右边的远端）onClick函数将触发。
这可以工作在伟大的Firefox浏览器。当页面呈现时，我可以用单个< td >点击一行中的任意位置，并且onClick函数将会触发。我通过console.log验证了这一点。
在IE9中，我可以让onClick函数触发的唯一方法是直接点击左对齐文本中的 i>单击该行中的其他任何地方都不执行onClick函数。我也通过console.log验证了这一点。据我所知，< td 长度只与它内部的文本一样大（因为只有点击文本才会触发onClick函数）
为了让IE9的行为符合Firefox的标准，我该怎么做？
我使用javascript来建立表格， jQuery通过附加到div来显示它。
一些代码：
<脚本>
var tableString ='< table>';
var tableArray = Array（10）;
for（i = 0; i< tableArray.length; i ++）{
tableArray [i] =以下字符串之一
< tr禁用> ;< td>一些文字< / td>< td>更多文字< / td>< / tr>
或
< tr onclick =clickFunc（）>< td>一些文字< / td>< / tr>
tableString = tableString + tableArray [i];
}
tableString = tableString +'< / table>';
jQuery（#tableDiv）.append（tableString）;
< / script>
< body>
< div id =tableDivwidth =600px>
< / div>
< / body>
var tableString ='< table>';
var tableArray = Array（10）;
for（i = 0; i< tableArray.length; i ++）{
tableArray [i] =< tr disabled>< td>一些文字< / td>< ; td>更多文字< / td>< / tr>
//或< tr onclick =clickFunc（）>< td>一些文字< / td>< / tr>
tableString = tableString + tableArray [i];
}
tableString = tableString +'< / table>';
jQuery（'＃tableDiv'）。append（tableString）;
jquery 1.10 +
$（ 'TR'）ATTR（ '类'， '点击'）;
$（'tr'）。eq（2）.text（'number 3'）;
$ b $（'td'）。click（function（）{
$（this）.toggleClass（'red'）
}）;
css示例
.red {
color：red;
}
I have a <table> in a <div>.
Each row may contain one or two <td>
The first <td> will always contain some left justified text.
Rows with two <td> are disabled and clicking on them does nothing.
Rows with one <td> have an onClick function attached.
I want that one <td> to extend the entire width of the div so if you click anywhere within it (on the left justified text, on the blank part in the middle or at the far end on the right side) the onClick function will fire.
This works GREAT in Firefox. When the page renders I can click anywhere in a row with a single <td> and the the onClick function will fire. I verified this with console.log
In IE9 the only way I can get the onClick function to fire is to click directly on the left justified text. Clicking anywhere else in that row DOES NOT execute the onClick function. I've also verified this with console.log. As near as I can tell, the <td> length is ONLY as big as the text within it (since only clicking on the text fires the onClick function)
What do i have to do to make IE9's behavior match Firefox's?
I'm using javascript to build the table and jQuery to display it by appending it to the div.
Some code:
<script>
var tableString = '<table>';
var tableArray=Array(10);
for (i=0;i<tableArray.length; i++){
tableArray[i] = one of the following strings
"<tr disabled><td> some text </td><td> more text </td></tr>"
or
"<tr onclick="clickFunc()" ><td> some text </td></tr>"
tableString = tableString + tableArray[i];
}
tableString = tableString + '</table>';
jQuery(#tableDiv).append(tableString);
</script>
<body>
<div id="tableDiv" width="600px" >
</div>
</body>
var tableString = '<table>';
var tableArray=Array(10);
for (i=0;i<tableArray.length; i++){
tableArray[i] = "<tr disabled><td> some text </td><td> more text </td></tr>"
// or "<tr onclick="clickFunc()" ><td> some text </td></tr>"
tableString = tableString + tableArray[i];
}
tableString = tableString + '</table>';
jQuery('#tableDiv').append(tableString);
jquery 1.10+
$('tr').attr('class','clicked');
$('tr').eq(2).text('number 3');
$('td').click(function(){
$(this).toggleClass('red')
});
css example
.red{
color: red;
}
这篇关于可变长度< td> IE9的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
