显示哪些单元格在提交时突出显示

Question

我目前在页面上有几个表格，可以选择或取消选择单元格。

有没有办法显示当用户点击提交按钮时选择了哪些单元格？

这里是小提琴： https://jsfiddle.net/blueberrymuffin/h18yr46a/9/

，我的代码如下。

谢谢。

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('#gridinfo').on('click', function (e) { 
    alert("info"); 

}); 

<table cellpadding="0" cellspacing="0" id="our_table1"> 
    <tr> 
    <td>a</td> 
    <td>b</td> 
    <td>c</td> 
    </tr> 
    <tr> 
    <td>d</td> 
    <td>e</td> 
    <td>f</td> 
    </tr> 
    <tr> 
    <td>g</td> 
    <td>h</td> 
    <td>i</td> 
    </tr> 
</table> 
</br> 
<table cellpadding="0" cellspacing="0" id="our_table2"> 
    <tr> 
    <td>a</td> 
    <td>b</td> 
    <td>c</td> 
    </tr> 
    <tr> 
    <td>d</td> 
    <td>e</td> 
    <td>f</td> 
    </tr> 
    <tr> 
    <td>g</td> 
    <td>h</td> 
    <td>i</td> 
    </tr> 
</table> 
<br/> 

<INPUT TYPE="submit" id="gridinfo" VALUE="grid info"> 

Answer 1

有一个很多方法可以做到这一点，这里是一个：

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('#gridinfo').on('click', function (e) { 
    var selected = new String(); 
    jQuery('.highlighted').each(function() { 
      selected += $(this).text(); 
     }); 
    alert("these cells have been selected: " + selected); 

}); 

工作fiddle