Question

我有<table＆gt;在<div＆gt;。

中

每行可能包含一个或两个<td＆gt;

第一个<td＆gt;将始终包含一些左对齐文本。

有两个<td＆gt;的行被禁用，点击它们什么都不做。

一行<td＆gt;的行附加了onClick功能。

我想要那个<td＆gt;扩展div的整个宽度，如果你点击它的任何地方（在左对齐文本，在中间的空白部分或在右边的远端），onClick函数将会触发。

这在Firefox中很有用。当页面呈现时，我可以使用单个<td＆gt;单击一行中的任意位置。并且onClick函数将触发。我用console.log验证了这一点

在IE9中，我可以触发onClick函数的唯一方法是直接在左对齐文本上单击。单击该行中的任何其他位置不执行onClick功能。我也用console.log验证了这一点。尽我所知，<td＆gt;长度只与文本中的文本一样大（因为只需单击文本即可触发onClick函数）

我需要做些什么才能让IE9的行为与Firefox相媲美？

我使用javascript构建表，jQuery通过将其附加到div来显示它。

一些代码：

<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>

Answer 1

 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示例

.red{
    color: red;
}

可变长度IE9

1 个答案: