通过Javascript可以更改高级编号的Colspan HTML表格

我在使Table和Colspans工作时遇到了一些麻烦。我正在尝试创建可用作日历的网格。每个'桌子'可以代表一个工作日期（晚上8点半到6点）。通过Javascript可以更改高级编号的Colspan HTML表格

在我的设计，我分隔成38列，一列，每次15分钟计时跨度这一点。

我已经做到了这一点，这样我可以并排显示不重叠的事件，和那些与已经“拿来主义”的细胞发生冲突，可以在这个表中的新行创建。

然而，在我的设计38列，我colspans不工作。

我的第一行被设定为19和19，所以50％。我的第二行设置为38，所以这是100％。

然而，当IE被渲染此，它显示第一行作为一个30％/ 70％分割周围。

我的HTML/CSS/JavaScript是如下：

<html> 
<head> 
<script type="text/javascript"> 
function setColSpan1(){ 
    var x=document.getElementById('myTable').rows[0].cells 
    x[0].colSpan="1" 
    x[1].colSpan="37" 
} 

function setColSpan2(){ 
    var x=document.getElementById('myTable').rows[0].cells 
    x[0].colSpan="19" 
    x[1].colSpan="19" 
} 
</script> 
</head> 

<body> 
<style> 
.column { 
    font-size: 1pt; 
    width: 100%; 
    background-color: red; 
    padding: 0px; 
    margin: 0px; 
    margin-bottom: 1px; 
    border: 1px solid black; 
    height: 10px; 
} 

.emptycolumn { 
    font-size: 1pt; 
    width: 100%; 
    background-color: blue; 
    padding: 0px; 
    margin: 0px; 
    margin-bottom: 1px; 
    border: 1px solid white; 
    height: 10px; 
} 
</style> 
<table id="myTable" border="0" cellpadding="0" cellspacing="0" width="100px"> 
<tr> 
    <td colspan="19"><div id="1" class="column" onclick="alert('test');" title="lala test"></div></td> 
    <td colspan="19"><div id="2" class="emptycolumn"></div></td> 
</tr> 
<tr> 
    <td colspan="38"><div id="3" class="column"></div></td> 
</tr> 
<tr> 
    <td colspan="1"><div id="4" class="column"></div></td> 
    <td colspan="24"><div id="5" class="emptycolumn"></div></td> 
    <td colspan="13"><div id="6" class="column"></div></td> 
</tr> 
</table> 

<form> 
    <input type="button" onclick="setColSpan1()" value="Change colspan 1"> 
    <input type="button" onclick="setColSpan2()" value="Change colspan 2"> 
</form> 
</body> 

</html>

我开始与最初的只有6列测试，这似乎很好地工作，但越来越多的我的设计，38打破了这一点。

我的设计错了吗？我如何才能准确地工作？由于

来源

2011-11-24 Elarys

这是行不通的，因为浏览器无法正确计算你列的宽度

你需要创建第一行38列（不合并单元格），然后把它隐藏在你的工作职能与下一行（在你的情况下，1）

如：

document.getElementById('myTable').rows[1].cells

PS：id属性：指定一个元素的唯一ID。

命名规则：

必须以字母A-Z或a-z 之后可以开始：字母（A-Za-z），数字（0-9），连字符（-）和下划线（_）在HTML中，所有值不区分大小写

并为您的文档指定DOCTYPE

来源

2011-11-24 11:37:44 Irishka

谢谢。我创建了38行，并为每个行指定了1px的宽度，并且工作正常。它会在html中留下很多空单元格的代码，但我想这是无法帮助的。我忘了ID命名规则，这个页面虽然只是一个测试，但是是一个概念证明。谢谢您的帮助。 – Elarys

欢迎你） – Irishka

通过Javascript可以更改高级编号的Colspan HTML表格

回答

相关问题