If you’re looking for a starting point to build this yourself, I would leave WordPress out of the equation in the beginning and just build it locally with HTML, CSS, and Javascript until your happy with the results. Once you have it working as you expect / want it to then you can look into porting it over to WordPress, maybe as a shortcode.
]]>That’s the “highest value per row is automatically marked with a colour” and the “The user should also be able to mark a cell manually” parts.
can you elaborate on what you want here: “Furthermore each marked cell per column should count as numerical value 1, so I can do further calculations with these values.”
]]>can you elaborate on what you want here: “Furthermore each marked cell per column should count as numerical value 1, so I can do further calculations with these values.”
:
Each marked cell counts as 1 point, which will be multiplied with a certain factor. This factor differs for each row. In the end all the points multiplied with their factor will be summed up for each column.
]]>There’s row totals and column totals for testing. The 1 * Row Multiplier is being placed in a span so you can visually see what’s happening.
Is that what you’re after?
]]>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.
<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.
]]>[db-verbindung-aufbauen]
[sc name="table_xyz"]And another question: Why is there a pop-up message every time I press “Calculate Multiplier”?
]]>