Wie kann ich einzelne Tabellenzellen ansprechen?

D

deGanis

Grünschnabel
Hallo.
Vielleicht könnt ihr mir ja weiterhelfen?
Ich habe eine Tabelle erstellt und würde jetzt gerne die einzelnen Tabellenzellen ansprechen um Rechenoperationen durchführen zu können.
Ist das überhaupt möglich? Und wenn ja, wie?

Besten Dank im Voraus!


HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
</head>
<body>
      <table height="156" cellspacing="2" cellpadding="1" width="551" border="2">
        <tbody>
          <tr valign="top">&nbsp; </tr>
          <tr>
            <td>Zu berechnende Positionen</td>
            <td>Joachim</td>
            <td>Petra</td>
          </tr>
          <tr valign="top">
            <td>Studiengeb&uuml;hren</td>
            <td>270</td>
            <td>330</td>
          </tr>
          <tr valign="top">
            <td>Krankenversicherung</td>
            <td>160</td>
            <td>90</td>
          </tr>
          <tr valign="top">
            <td>Miete</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr valign="top">
            <td>Lebensmittel</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr valign="top">
            <td>Summe</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
 
Ich nehme mal an, dass es mit Javascript gelöst werden soll. Via getElementsByTagName und 2 for-Schleifen kannst du jede Zelle auslesen/bearbeiten.

HTML:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
</head>
<body>
      <table height="156" cellspacing="2" cellpadding="1" width="551" border="2">
        <tbody>
          <tr valign="top">&nbsp; </tr>
          <tr>
            <td>Zu berechnende Positionen</td>
            <td>Joachim</td>
            <td>Petra</td>
          </tr>
          <tr valign="top">
            <td>Studiengeb&uuml;hren</td>
            <td>270</td>
            <td>330</td>
          </tr>
          <tr valign="top">
            <td>Krankenversicherung</td>
            <td>160</td>
            <td>90</td>
          </tr>
          <tr valign="top">
            <td>Miete</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr valign="top">
            <td>Lebensmittel</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr valign="top">
            <td>Summe</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </tbody>
      </table>
    </div>
   <script>
   (function(){
       var t = document.getElementsByTagName("table");
       var trs = t[0].getElementsByTagName("tr");
       var summe = [0,0];
       var trsleng = trs.length;
         for (var i=2; i<trsleng; i++){ // Ueberspring erste 2 TR (2 Zeilen unintressant)
             var tds = trs[i].getElementsByTagName("td");

             for (var n=1; n<tds.length;n++){ // Ueberspring erste TD (Zu berechnende Positionen)
                   if(i<trsleng-1){
                     var spalte= (parseInt(tds[n].innerText, 10))?parseInt(tds[n].innerText, 10):0;
                       summe[n-1] += spalte;
                 }else{
                 tds[n].innerText = summe[n-1];
                 }

             }
         }
   })();
   </script>
  </body>
</html>

Javascript:
Code: 
(function(){
var t = document.getElementsByTagName("table");
var trs = t[0].getElementsByTagName("tr");
var summe = [0,0];
var trsleng = trs.length;
  for (var i=2; i<trsleng; i++){ // Ueberspring erste 2 TR (2 Zeilen unintressant)
      var tds = trs[i].getElementsByTagName("td");

      for (var n=1; n<tds.length;n++){ // Ueberspring erste TD (Zu berechnende Positionen)
             if(i<trsleng-1){
               var spalte= (parseInt(tds[n].innerText, 10))?parseInt(tds[n].innerText, 10):0;
                 summe[n-1] += spalte;
          }else{
          tds[n].innerText = summe[n-1];
          }

      }
  }
})();

JSFIDDLE:
https://jsfiddle.net/8mhqquqd/1/
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück