Implement an interactive table marking the highest value
-
Hey guys,
I’m quiet new to WordPress and web development in general.
For my new project I need to implement a table, in which the cell containing the highest value per row is automatically marked with a colour. The user should also be able to mark a cell manually. Furthermore each marked cell per column should count as numerical value 1, so I can do further calculations with these values.
Not sure how this could be done. Is there a plugin for such a function?Thanks a lot in advance
Greetings
Saib0t
-
So to test it, I tried to insert the code into my wordpress site using the plugin “Shortcoder”. But for some reason nothing appears in the preview.
I merged HTML, CSS and JS into one document, as follows:
<!DOCTYPE html> <html> <head> <style>td { border:1px solid #000; color: #000; cursor: pointer; } .max { background: red; color: #fff; } .selected { background: purple; color: #fff; } small { color: yellow; padding: 0 5px; }</style> <script> /* https://stackoverflow.com/questions/45983101/jquery-find-smallest-value-in-table-row-and-style-it */ $('document').ready(function(){ $('tr').not('.colTotal').each(function(){ var vals = $('td,th',this).map(function () { return parseInt($(this).text(), 10) ? parseInt($(this).text(), 10) : null; }).get(); // then find their maximum var max = Math.max.apply(Math, vals); // tag any cell matching the max value $('td,th', this).filter(function () { return parseInt($(this).text(), 10) === max; }).addClass('max'); }); /* user clicks */ $('td').on('click', function(){ if($(this).hasClass('max')){ $(this).removeClass('max'); } else { $(this).toggleClass('selected'); } }); }); /* add up row values */ $('#calcRows').on('click', function(){ $('tr').not('.colTotal').each(function () { var sum = 0 /* $(this).find('td').not('.total').each(function () { var val = $(this).text(); if (!isNaN(val) && val.length !== 0) { sum += parseFloat(val); } }); $('.total', this).html(sum); */ var sum = $('td.max', this).length + $('td.selected', this).length; $('.total', this).text(sum); }); }); $('#calcCols').on('click', function(){ for (i=0;i<$('tr:eq(0) td').length;i++) { var total = 0; $('td:eq(' + i + ')', 'tr').each(function(i) { $('small', this).remove(); if (!isNaN(parseInt($(this).text()))){ total = total + parseInt($(this).text()); } }); $('tr.colTotal td').eq(i).text(total); } }); $('#calcMul').on('click', function(){ for (i=0;i<$('tr:eq(0) td').length;i++) { var tot = 0; $('td:eq(' + i + ')', 'tr').each(function(i) { $('small', this).remove(); if($(this).hasClass('max') || $(this).hasClass('selected')) { if (!isNaN(parseInt($(this).text()))){ $(this).append('<small />'); $('small', this).text(1 * parseInt($(this).parent('tr').data('multiplier'))); tot = tot + parseInt($('small', this).text()); //tot = 1 * parseInt($(this).parent('tr').data('multiplier')); //alert(parseInt($(this).parent('tr').data('multiplier'))); } } }); $('tr.mulTotal td').eq(i).text(tot); } }); </script> </head> <body> <table cellpadding="10" cellspacing="0"> <tr data-multiplier="7"> <td>29</td> <td>921</td> <td>2</td> <td class="total"></td> </tr> <tr data-multiplier="2"> <td>112</td> <td>9</td> <td>55</td> <td class="total"></td> </tr> <tr data-multiplier="5"> <td>13</td> <td>81</td> <td>82</td> <td class="total"></td> </tr> <tr class="colTotal"> <td></td> <td></td> <td></td> </tr> <tr class="mulTotal"> <td></td> <td></td> <td></td> </tr> </table> <button id="calcRows">Calculate Rows</button> <button id="calcCols">Calculate Columns</button> <button id="calcMul">Calculate Multiplier</button> </body> </html>Any idea, why the table wouldn’t show up?
When inserting the code into the text editor of wordpress, the table appears in the visual editor, but not in the page preview.I installed Shortcoder. Created a short code and pasted in your code above. Then created a page and added the supplied shortcode ([sc name=”table_xyz”]). Saved the page. Opened the page and the table is there. No issue with displaying it. But, that javascript isn’t going to work there. Try it again using the code below. I added an ID to the table to prevent errors and moved the closing JS bracket to the end as Fiddle works differently.
<html> <head> <style>td { border:1px solid #000; color: #000; cursor: pointer; } .max { background: red; color: #fff; } .selected { background: purple; color: #fff; } small { color: yellow; padding: 0 5px; }</style> <script> /* https://stackoverflow.com/questions/45983101/jquery-find-smallest-value-in-table-row-and-style-it */ jQuery('document').ready(function(){ jQuery('#table_xyz tr').not('.colTotal').each(function(){ var vals = jQuery('td,th',this).map(function () { return parseInt(jQuery(this).text(), 10) ? parseInt(jQuery(this).text(), 10) : null; }).get(); // then find their maximum var max = Math.max.apply(Math, vals); // tag any cell matching the max value jQuery('td,th', this).filter(function () { return parseInt(jQuery(this).text(), 10) === max; }).addClass('max'); }); /* user clicks */ jQuery('#table_xyz td').on('click', function(){ if(jQuery(this).hasClass('max')){ jQuery(this).removeClass('max'); } else { jQuery(this).toggleClass('selected'); } }); /* add up row values */ jQuery('#calcRows').on('click', function(){ jQuery('#table_xyz tr').not('.colTotal').each(function () { var sum = 0 /* jQuery(this).find('td').not('.total').each(function () { var val = jQuery(this).text(); if (!isNaN(val) && val.length !== 0) { sum += parseFloat(val); } }); jQuery('.total', this).html(sum); */ var sum = jQuery('td.max', this).length + jQuery('td.selected', this).length; jQuery('.total', this).text(sum); }); }); jQuery('#calcCols').on('click', function(){ for (i=0;i<jQuery('#table_xyz tr:eq(0) td').length;i++) { var total = 0; jQuery('td:eq(' + i + ')', '#table_xyz tr').each(function(i) { jQuery('small', this).remove(); if (!isNaN(parseInt(jQuery(this).text()))){ total = total + parseInt(jQuery(this).text()); } }); jQuery('#table_xyz tr.colTotal td').eq(i).text(total); } }); jQuery('#calcMul').on('click', function(){ alert('s'); for (i=0;i<jQuery('#table_xyz tr:eq(0) td').length;i++) { var tot = 0; jQuery('td:eq(' + i + ')', '#table_xyz tr').each(function(i) { jQuery('small', this).remove(); if(jQuery(this).hasClass('max') || jQuery(this).hasClass('selected')) { if (!isNaN(parseInt(jQuery(this).text()))){ jQuery(this).append('<small />'); jQuery('small', this).text(1 * parseInt(jQuery(this).parent('tr').data('multiplier'))); tot = tot + parseInt(jQuery('small', this).text()); //tot = 1 * parseInt(jQuery(this).parent('tr').data('multiplier')); //alert(parseInt(jQuery(this).parent('tr').data('multiplier'))); } } }); jQuery('#table_xyz tr.mulTotal td').eq(i).text(tot); } }); }); </script> </head> <body> <table cellpadding="10" cellspacing="0" id="table_xyz"> <tr data-multiplier="7"> <td>29</td> <td>921</td> <td>2</td> <td class="total"></td> </tr> <tr data-multiplier="2"> <td>112</td> <td>9</td> <td>55</td> <td class="total"></td> </tr> <tr data-multiplier="5"> <td>13</td> <td>81</td> <td>82</td> <td class="total"></td> </tr> <tr class="colTotal"> <td></td> <td></td> <td></td> </tr> <tr class="mulTotal"> <td></td> <td></td> <td></td> </tr> </table> <button id="calcRows">Calculate Rows</button> <button id="calcCols">Calculate Columns</button> <button id="calcMul">Calculate Multiplier</button> </body> </html>Another thing that might be messing it up is that you have stuff like:
<!DOCTYPE html> <html> <head> ... </head> <body> ... </body> </html>My test theme is stripping those out and all good. If your’s isn’t that could be the issue. You don’t need those.
Ok I think I found the problem.
At the beginning of the page I inserted another shortcode with Post Snippets. This code is supposed to establish the connection to my database. As soon, as I remove this shortcode everything is fine. Any idea why?
It would just look like this:[db-verbindung-aufbauen] [sc name="table_xyz"]And another question: Why is there a pop-up message every time I press “Calculate Multiplier”?
- The topic ‘Implement an interactive table marking the highest value’ is closed to new replies.