顯示哪些單元格在提交時突出顯示

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