Question

我想要做的是创建一个矩阵，其中每个都是可点击的，javascript给我点击的元素。我有这个HTML
<table id="availability"> <tr> <th class="lat-header rotate"></th> <th class="rotate">Mattino</th> <th class="rotate">Pomeriggio</th> <th class="rotate">Sera</th> <th class="rotate">Full-time</th> </tr> <tr id="day_[0]"> <th class="lat-header">Lun</th> <td data-role="00"></td> <td data-role="01"></td> <td data-role="02"></td> <td data-role="03"></td> </tr> <tr id="day_[1]"> <th class="lat-header">Mar</th> <td data-role="10"></td> <td data-role="11"></td> <td data-role="12"></td> <td data-role="13"></td> </tr> <tr id="day_[2]"> <th class="lat-header">Mer</th> <td data-role="20"></td> <td data-role="21"></td> <td data-role="22"></td> <td data-role="23"></td> </tr> </table>

然后这个CSS：

table#availability {
    text-align:center;
    width:100%;
}
table#availability th, table#availability td {
    display: inline-block;
    width: 16%;
    height: 4em;
    padding: 0;
    margin: 5px;
    font-size: 12px;
    line-height:4em;
}
table#availability td {
    background-color: aqua;
    display: inline-block;
    transition: background-color ease 0.5s
}
table#availability td.cellSelected {
    background-color:#00ff00;
}
table#availability th.lat-header {
    width: 2em;
    text-align: right;
    position:relative;
    left:-1em;
}
table#availability th.rotate {
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    text-align:left;
}

并持续这个小javascript：

var availMatrixArr = [];//array of clicked elements
jQuery('table#availability td').click(function(){
    var selElIndex = $(this).attr('data-role');
    var indexInArr = jQuery.inArray(selElIndex,availMatrixArr);
    if(indexInArr > -1){
        $(this).removeClass('cellSelected');
        availMatrixArr.splice(indexInArr,1);
    } else {
        availMatrixArr.push(selElIndex);
        $(this).addClass('cellSelected');
    }
    console.log(selElIndex);
    console.log(availMatrixArr);
});

问题是，当屏幕调整大小时，我想要对齐底部的列标题会改变它们相对于表格的位置，因此我可以让我的代码适用于每个屏幕尺寸。这是我的JsFiddle 如果您尝试调整＆＃34;结果＆＃34;在小提琴中你会理解我的意思。

Answer 1

你可以尝试像这样编辑你的HTML：

  <tr>
    <th class="lat-header rotate"></th>
    <th><span class='rotate'>Mattino</span></th>
    <th><span class="rotate">Pomeriggio</span></th>
    <th><span class='rotate'>Sera</span>
    <th class="rotate"><span class='rotate'>Fulltime</span>
</tr>

并像这样改变你的CSS

table#availability th .rotate {
    display:inline-block;
    width:60px;
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    text-align:left;

}

在这里，您可以看到有效的fiddle

矩阵图：无法设置旋转列名称的样式

1 个答案: