jQuery :: Aufgabe #1

3 Lösungen Lösungen öffentlich

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:
Quellcode ausblenden JavaScript-Code
$().ready(function(){
	$('td:not(:first-of-type, :last-of-type)')........?
});

Quellcode ausblenden 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:

vote_ok
von bibir (1870 Punkte) - 07.10.2014 um 12:32 Uhr
Quellcode ausblenden 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);
								});
						});
});
1x
vote_ok
von aheiland (650 Punkte) - 19.10.2015 um 09:57 Uhr
Quellcode ausblenden 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);
    });
vote_ok
von J_U_B (650 Punkte) - 12.06.2016 um 23:41 Uhr
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:

Quellcode ausblenden 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();
          }
        });
      }
    });
});