Question

我正在尝试将代码从表格更改为仅css。我想包括工作表当前具有的所有功能，包括：

单击时更改背景颜色，

限制点击的单元格数量

并显示已点击的单元格。

我完成了一小部分，但无法弄清楚剩下的部分。谢谢你的帮助。

这是小提琴： https://jsfiddle.net/blueberrymuffin/h18yr46a/16/ 我目前的代码如下：

的CSS：

table td {
  width:25px;
  height:25px;
  text-align:center;
  vertical-align:middle;
  background-color:#ccc;
  border:1px solid #fff;
}

table td.highlighted {
  background-color:#999;
}


.css-table {
    display: table;
    background-color:#ccc;
    width: 80px;
}
.css-table-tr { 
    display: table-row;     
}


.css-table-td { 
    display: table-cell;
    border:1px solid #fff;
    width: 30px;
    height:30px;
    text-align:center;
  vertical-align:middle;
}

jquery的

jQuery('table').on('click', function (e) {
    var ourTable = jQuery(e.target).closest('table');
    var sCount = ourTable.find('.highlighted').length;
    console.log(ourTable, sCount, $(e.target).hasClass('highlighted'));

    if (sCount < 4 || $(e.target).hasClass('highlighted')) {
        $(e.target).toggleClass("highlighted");
    }
  e.preventDefault();
});


jQuery('#tableinfo').on('click', function (e) {
    var selected = new String();
    jQuery('.highlighted').each(function() {
            selected += $(this).attr('id')+" ";
        });
    alert("these cells have been selected: " + selected);

});

HTML

<table cellpadding="0" cellspacing="0" id="our_table1">
  <tr>
    <td id="A~0">a</td>
    <td id="A~1">b</td>
    <td id="A~2">c</td>
  </tr>
  <tr>
    <td id="A~3">d</td>
    <td id="A~4">e</td>
    <td id="A~5">f</td>
  </tr>
  <tr>
    <td id="A~6">g</td>
    <td id="A~7">h</td>
    <td id="A~8">i</td>
  </tr>
</table>
</br>
<table cellpadding="0" cellspacing="0" id="our_table2">
  <tr>
    <td id="B~0">a</td>
    <td id="B~1">b</td>
    <td id="B~2">c</td>
  </tr>
  <tr>
    <td id="B~3">d</td>
    <td id="B~4">e</td>
    <td id="B~5">f</td>
  </tr>
  <tr>
    <td id="B~6">g</td>
    <td id="B~7">h</td>
    <td id="B~8">i</td>
  </tr>
</table>
<br/>

<INPUT TYPE="submit" id="tableinfo" VALUE="table info">

    <br/>    <br/>

<div class="css-table">
  <div class="css-table-tr">
        <div class="css-table-td" id="1">a</div>
        <div class="css-table-td" id="2">b</div>
        <div class="css-table-td" id="3">c</div>
    </div>
    <div class="css-table-tr">
        <div class="css-table-td" id="4">d</div>
        <div class="css-table-td" id="5">e</div>
        <div class="css-table-td" id="6">f</div>
    </div>
    <div class="css-table-tr">
        <div class="css-table-td" id="7">g</div>
        <div class="css-table-td" id="8">h</div>
        <div class="css-table-td" id="9">i</div>
    </div>
</div>     

<br/>

<div class="css-table">
  <div class="css-table-tr">
        <div class="css-table-td" id="1">a</div>
        <div class="css-table-td" id="2">b</div>
        <div class="css-table-td" id="3">c</div>
    </div>
    <div class="css-table-tr">
        <div class="css-table-td" id="4">d</div>
        <div class="css-table-td" id="5">e</div>
        <div class="css-table-td" id="6">f</div>
    </div>
    <div class="css-table-tr">
        <div class="css-table-td" id="7">g</div>
        <div class="css-table-td" id="8">h</div>
        <div class="css-table-td" id="9">i</div>
    </div>
</div>     

    <INPUT TYPE="submit" id="csstableinfo" VALUE="css info">

将html表转换为css

0 个答案: