jQuery :: Aufgabe #1
3 Lösungen
Rechnen wie mit Excel
Fortgeschrittener - jQuery
von bibir
- 03.09.2014 um 13:57 Uhr
Die JavaScript-Datei ist so zu ergaenzen, dass die inneren Tabellenzellen der Html-Seite editiert werden können und gleichzeitig die Summen in der letzten Spalte aktualisiert werden.
excelchen.js:
JavaScript-Code
HTML-Code
excelchen.js:
JavaScript-Code$().ready(function(){
$('td:not(:first-of-type, :last-of-type)')........?
}); HTML-Code<!DOCTYPE html>
<html>
<head>
<title>Excelchen</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="excelchen.js"></script>
<style type="text/css">
table {border-collapse: collapse;}
th, td {border: 1px solid grey; padding: 1ex;}
th {background-color: lightblue;}
td:first-of-type, td:last-of-type {background-color: yellow;}
</style>
</head>
<body>
<table>
<tr>
<th>Produkt</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th>Q4</th>
<th>Summe</th>
</tr>
<tr>
<td>Zeitschrift</td>
<td>115</td>
<td>120</td>
<td>130</td>
<td>125</td>
<td>490</td>
</tr>
<tr>
<td>App</td>
<td>85</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>325</td>
</tr>
<tr>
<td>Web</td>
<td>150</td>
<td>140</td>
<td>144</td>
<td>160</td>
<td>594</td>
</tr>
</table>
</body>
</html>Lösungen:
JavaScript-Code
$().ready(function(){
$('td:not(:first-of-type, :last-of-type)')
.wrapInner('<span contenteditable="true"></span>')
.hover(function(){
$(this).css('outline', '3px solid lightgrey');
},
function(){
$(this).css('outline', 0);
})
.keyup(function(){
var summe = 0;
$(this).parent().children(":not(:first, :last)")
.each(function(){
var wert = parseFloat($(this).text());
if(!isNaN(wert)) summe += wert;
$(this).siblings(":last").text(summe);
});
});
});
JavaScript-Code
$('td:last-of-type').text(0);
$('td:not(:first-of-type, :last-of-type)').each(function (index){
var parent_tr = $(this).parent();
var result_td = $(parent_tr).children('td:last-of-type');
var result = parseInt($(result_td).text()) + parseInt($(this).text());
$(result_td).text(result);
});
Würde mich über Kommentare zu meiner Lösung freuen, bin noch sehr neu auf dem gebiet Javascript und jQuery.
Nur aus der Javascript-Datei heraus, und nur die eine Funktion ergänzt:
JavaScript-Code
Nur aus der Javascript-Datei heraus, und nur die eine Funktion ergänzt:
JavaScript-Code
$().ready(function(){
$('td:not(:first-of-type, :last-of-type)').on('click', function(){
if($(this).not(':has(#textFeld)').length){
$(this).html('<input type="text" id="textFeld" style="width:'+$(this).width()+'px" value="'+$(this).text()+'" />');
var txtField = $("#textFeld");
txtField.focus();
txtField.on('focusout', function(){
var txtFieldParent = $(this).parent();
txtFieldParent.html($(this).val());
var sum = 0;
txtFieldParent.parent().find('td:not(:first-of-type, :last-of-type)').each(function(){
if($.isNumeric($(this).text())===true){
sum = sum + Number($(this).text());
} else {
sum = "#Error";
return false;
}
});
txtFieldParent.parent().find('td:last-of-type').text(sum);
});
txtField.keypress(function(event){
if(event.keyCode==13){
$(this).focusout();
}
});
}
});
});