I am trying to change my code from tables only to css. I would like to include all the functionality that the worksheet currently has, including:
background color change when pressed,
click cell limit
and showing which cells were clicked.
I have a small part, and I can not understand the rest. Thanks for the help.
Here is the fiddle: https://jsfiddle.net/blueberrymuffin/h18yr46a/16/ And my current code is below:
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">
source share