我有一个AJAX应用程序,它下载一个JSON对象并使用这些数据使用Javascript DOM函数向HTML <table>添加行.它完美无缺......除了在Internet Explorer中.IE没有出现任何类型的错误,我已经尽可能地验证了浏览器正在执行的代码,但它根本没有效果.我创建了这个快速而脏的页面来演示问题:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body>
<table id="employeetable">
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</table>
<script type="text/javascript">
function addEmployee(employeeName, employeeJob) {
var tableElement = document.getElementById("employeetable");
if (tableElement) {
var newRow = document.createElement("tr");
var nameCell = document.createElement("td");
var jobCell = document.createElement("td");
nameCell.appendChild(document.createTextNode(employeeName));
jobCell.appendChild(document.createTextNode(employeeJob));
newRow.appendChild(nameCell);
newRow.appendChild(jobCell);
tableElement.appendChild(newRow);
alert("code executed!");
}
}
setTimeout("addEmployee(\"Bob Smith\", \"CEO\");", 1000);
setTimeout("addEmployee(\"John Franks\", \"Vice President\");", 2000);
setTimeout("addEmployee(\"Jane Doe\", \"Director of Marketing\");", 3000);
</script>
</body></html>
我没有尝试IE 8,但IE 7和IE 6都没有显示应该添加的额外行.我无法理解为什么.有谁知道这个问题的好方法,或者我可能做错了什么？
如何在不通过AJAX加载数据的情况下使用javascript对表进行排序？更具体地说,我正在寻找一个解决方案,它给了我以下内容:
我不想要的:
我有意为我现在正在处理的特定项目省略了我们的技术堆栈,但是如果人们觉得它是绝对必要的,那么它将包含它.同样,我最感兴趣的是在服务器上不涉及任何内容的解决方案.有很多项目用各种语言写成,可以在这个领域使用一点点爱.
关于Stack Overflow上类似的现有问题
我做了一些探讨,我能找到的最接近的问题就是这个问题.然而,我的要求有点不同,所以我决定提出一个新问题.
为什么CSS属性overflow:scroll;不起作用<td>,虽然overflow:hidden;效果很好？
<table border="1" style="table-layout:fixed; width:100px">
<tr>
<td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>
<td>200</td>
<td>300</td>
</tr>
</table>
我坚持这个问题所以任何帮助将不胜感激.我有一个有几行的表.行中的每个单元属于某个类.我使用这些类名来为单元格着色.
这是我表中的一个示例行:
<tr>
<td class = "summarypage-odd-column">Theme</td> <td class = "summarypage-odd-column">Q2 2009</td> <td class = "summarypage-odd-column">Q1 2009</td>
<td class = "summarypage-even-column">Theme</td> <td class = "summarypage-even-column">Q2 2009</td> <td class = "summarypage-even-column">Q1 2009</td>
<td class = "summarypage-odd-column">Business Area</td> <td class = "summarypage-odd-column">Q1 2009</td> <td class = "summarypage-odd-column">Q1 2008</td>
</tr>
当用户将鼠标指针移动到该行中的任何单元格上时,我想突出显示每一行.所以我使用以下CSS代码来实现这一点.
tr:hover {
background-color: #FFFAF0; color: #000;
}
不幸的是,似乎因为每个表数据单元都有一个类名,悬停不起作用.但是,如果我从数据单元格中删除类名,则悬停可以正常工作.
我的问题是,有什么方法可以让悬停的东西为表行工作,同时仍然有行内的表数据单元的类名.
如何使表格标题在表格的左侧显示为列而不是在顶部显示为行？我有这个标记:
<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
我正在开发一个用于产品数据管理的webapp,其中产品数据显示在一个包含4列(索引号,SKU,产品描述和库存)的表中.
我面临的问题是,当表变得非常大(> 1000行)时,页面非常滞后,特别是当我将鼠标悬停在一行上时(我__CODE__在CSS中定义).
我尝试通过使用一些javascript来部分地显示数据并在用户向下滚动时加载更多来解决此问题:
/**
* @namespace Start the project called 'stck'
*/
var stck = {};
/**
* Variable to save stock loaded
*/
stck.stockInfo = [];
/**
* Load the item informaction acording the SKU
* @private
* @param {string} SKU The SKU of the item
*/
stck.loadItemInformation = function(SKU) {
var descriptionsTable = document.getElementById('descriptionsTable');
for (var rowsLength = descriptionsTable.rows.length - 1; --rowsLength; ) {
descriptionsTable.deleteRow(1);
}
var pricesTable = document.getElementById('pricesTable');
for (var rowsLength = pricesTable.rows.length …解决方案可以使用jQuery或纯JavaScript.
我想在用户单击表格行单元格中包含的相应按钮后删除表格行,例如:
<script>
function SomeDeleteRowFunction() {
//no clue what to put here?
}
</script>
<table>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
</tr>
</table>
我有一个表作为HTML文档的整个内容(为了合法的表目的......它是表数据,而不是布局).某些单元格指定了宽度和高度(不是通过css,而是在表结构中使用旧的大小调整内联),但整个表格没有指定宽度或高度.这是一个相当大的桌子,但如果有适当的缩放比例(约70%),它可以打印出来,以便很好地贴合在一张纸上.这可以通过使用IE,Firefox和Chrome的打印机设置中的"缩放页面"功能来完成.有没有办法扩展整个页面(在我的情况下只是这个表)作为打印样式表的一部分(我知道@media print {}但是那里的语句被忽略了......问题在于正确的命令用于缩放,而不是设置print css)？我可以用这个缩放屏幕视图:
body {
transform: scale(.7);
}
但是在打印时,Chrome(和其他人)会忽略我的比例并自动缩放表格以适应纸张的宽度,这会导致我的表格被分割到第二页.我也试过应用这个但没有成功:
table {page-break-inside: avoid;}
我正在努力重新设计一个遗留工具集,我正在研究如何在表现和语义上更好地显示一些信息.
数据本质上是分层的,但具有需要用户容易看到的属性.所需的布局类似于下面.
Seq Item Name Min Max - Anything under here isn't shown
1 Identifier 1 1 (Required)
2 Name 1 1
2.1 First Name 1 1
2.2 Middle Name - - (Optional but unlimted)
2.3 Last Name 1 1
3 Age - 1 (Optional)
目前,这是一个完整的表,并且Seq通过插入额外的表格单元来实现对顺序()数字的交叉处理.
我面临的挑战是如何有效地显示这些信息.
首先是这个表格数据？我会说不,因为层次结构很重要,而'列'只是每个'行'中项目的属性.
如果它不是表格,它是什么以及如何做？我个人认为这是一组嵌套UL列表 - 序列号是可选的,并不总是一个数字.如果它是一组列表,那将正确缩进子列表,但是呈现短属性的最佳方式是什么？
如果它是一个表,那么在表中呈现层次结构的语义存在的最佳方法是什么？
为什么边界不显示tbody在下面？我尝试rules="groups"了边框,但只是在两个tbody部分之间,它已折叠.
table.sectioned tbody {
border: 2px solid black;
border-collapse: separate;
border-spacing: 4px;
}<table class="sectioned">
<tbody>
<tr><td colspan="2"><b>General Data</b></td></tr>
<tr><td>Tail Number</td><td>N0809021</td></tr>
<tr><td>Type of Ownership</td><td>personal</td></tr>
<tr><td>Type of Aircraft</td><td>aircraft under 13,000 pounds</td></tr>
<tr><td>Year of Manufacture</td><td>1999</td></tr>
<tr><td>Use of Aircraft</td><td>private</td></tr>
<tr><td>Start Date</td><td></td></tr>
<tr><td>Policy Length</td><td>6 months</td></tr>
</tbody>
<tbody>
<tr><td colspan="2"><b>Additional Aircraft Information</b></td></tr>
<tr><td>Manufacturer</td><td></td></tr>
<tr><td>Model</td><td></td></tr>
<tr><td>Engine Make</td><td></td></tr>
<tr><td>Number of Seats</td><td></td></tr>
</tbody>
</table>html-table ×10
css ×7
html ×5
javascript ×4
jquery ×2
ajax ×1
css-tables ×1
hover ×1
row ×1
scroll ×1
sorting ×1
wcag ×1
wcag2.0 ×1
xhtml ×1