【发布时间】：2017-05-21 09:02:15
【问题描述】：
我目前有两张相互叠放的桌子。前表只显示它的标题，并且使用 css "visibility:hidden" 隐藏正文。此表使用“位置：绝对”使其冻结到位，该表是第二个表的完整克隆。
当我在 IE 上进行测试时，第二个表格的 tbody 上的下拉列表和链接工作正常，但是当我在 chrome 上测试它时，第二个表格无法点击，因为它被前面的隐藏表格主体阻止了其中。
是否有任何替代方法可用于在 chrome 上实现标题的冻结？
注意：将被加载的数据是动态的，具有不同的大小。每列的宽度会相应调整。
这是一个示例代码，但这在 fiddle 上可以正常工作，但在用作 html 文件并在 chrome 上运行时将无法正常工作：https://fiddle.jshell.net/3poz4o4q/3/
添加了我测试过的整个 HTML 文件。 从这里得到 jquery http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js 并将其保存在文件名“jquery-1.9.1.min.js”上并引用它。
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script>
function onLoad() {
var cloneData = $('#actualData tr').clone(false);
$("#sampleData").append(cloneData);
var cloneHeader = $('#behindHeader tr').clone();
$("#showingHeader").append(cloneHeader);
$("#sampleData").css("visibility", "collapse");
$("#behindHeader").css("visibility", "collapse");
$("#tableHeader").css("position", "absolute");
}
</script>
<body onload="onLoad()">
<div class="table-header" id="tableHeader">
<table class="editableTable" id="editTable" border="1">
<thead id="showingHeader"/>
<tbody id="sampleData"/>
</table>
</div>
<div class="table-body" id="tableBody">
<table class="editableTable" id="bodytable" border="1">
<thead id="behindHeader">
<tr id="entity-header">
<th colspan="13">
<a id="Create Something">Create Something</a>
<a id="Create another thing">Create another thing</a>
<a href="#" id="save">Save</a>
</th>
</tr>
<tr id="column-headers">
<th id="data link">data link</th>
<th id="data 1">data 1</th>
<th id="data 2">data 2</th>
<th id="data 3">data 3</th>
<th id="data 4">data 4</th>
<th id="data 5">data 5</th>
<th id="data 6">data 6</th>
<th id="drop down 1">drop down 1</th>
<th><span id="checkbox 1">checkbox 1</span></th>
<th id="drop down 2">drop down 2</th>
<th><span id="checkbox 2">checkbox 2</span></th>
<th id="drop down 3">drop down 3</th>
<th><span id="checkbox 3">checkbox 3</span></th>
</tr>
</thead>
<tbody id="actualData">
<tr id="actual id" class="modified">
<td ><a href="#" >Data ID</a></td>
<td >Data Description 1</td>
<td >Data Description 2</td>
<td >Data Description 3</td>
<td >Data Description 4</td>
<td >Data Description 6</td>
<td >Data Description 7</td>
<td >
<select>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
<td >
<div class="checkbox">
<input id="1" type="checkbox"><label for="1"></label>
</div>
</td>
<td >
<select>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
</select></td>
<td >
<div class="checkbox">
<input id="2" type="checkbox"><label for="2"></label>
</div>
</td>
<td >
<select disabled="disabled">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
<td >
<div class="checkbox" disabled="disabled">
<input id="3" type="checkbox" disabled="disabled"><label for="3" disabled="disabled"></label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
【问题讨论】：
-
寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码 .
-
请添加您的代码
-
"这是一个示例代码，但这在 fiddle 上可以正常工作，但在用作 html 文件并在 chrome 上运行时将无法正常工作"您可能没有正确调用 jQuery。
-
已经添加了代码。我创建了 jquery 的本地副本并引用了它。在 IE 上，所有链接、文本框和下拉菜单都有效，但在 chrome 上，它是不可点击的。
标签： javascript jquery html css google-chrome