Wie kann ich einzelne Tabellenzellen ansprechen?


#1
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>
 

abdellaui

Erfahrenes Mitglied
#3
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/