通過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表格

回答

相關問題