Question

我在让Table和Colspans工作时遇到了一些麻烦。我正在尝试创建一个可用作日历的网格。每个“表”可以代表一个工作日（晚上8:30至下午6点）。

在我的设计中，我将其分为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就打破了这个。

我的设计错了吗？我怎样才能让它准确工作？感谢

Answer 1

它不起作用，因为浏览器无法正确计算列的宽度

你需要创建第一行有38列（没有colspan），然后隐藏它，并在你的函数中使用下一行（在你的情况下为第一行）

e.g：

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

P.S。：id属性：指定元素的唯一ID。

命名规则：

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

并为您的文档指定DOCTYPE

高编号的Colspan HTML表格可通过Javascript改变

1 个答案: