Ich versuche, mit JavaScript eine Zeichenfolge zu erstellen, die alle Daten in einer HTML-Tabelle enthält (offen für den Wechsel zu JQuery). Mit dieser Methode erhalte ich anstelle der Daten (Zahlen) einen NaN-Wert.

function Ard() {
    var table = document.getElementById("tblData");
    var dataStr = "";
    for (var i = 0, row; row = table.rows[i]; i++) {
      for (var j = 0, col; col = row.cells[j]; j++) {
          var toAdd = col;
          dataStr += toAdd;
      }
    }
};

Ich habe auch eine jQuery-Methode ausprobiert, aber sie hat nur ein HTML-Objekt zurückgegeben. Es ist zu beachten, dass beim Drucken des 'col'-Werts auf die Konsole die Daten ordnungsgemäß erfasst werden (tatsächliche Werte).

Die von mir verwendete Tabelle kann vom Benutzer bearbeitet werden, wird jedoch als Standard-HTML-Tabelle gespeichert. Hier ist der Basiscode für die folgende Tabelle, wenn er zur Lösung des Problems beiträgt.

<table id="tblData" class="table table-hover">
    <thead>
        <tr>
            <th>Date</th>
            <th>Time</th>
            <th>Treatment Number</th>
            <th>Cell Number</th>
            <th>Waste Container Number</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Irgendwelche Ideen, wie man das innerHTML erhält und es richtig zum String hinzufügt?

Ich möchte dies auch mit einer zeilenweisen Schleife tun (Satz von zwei für oder jede Schleife vielleicht?), Damit ich weiß, aus welcher Spalte ich greife.

0
Coleen 6 Aug. 2015 im 19:34

4 Antworten

Beste Antwort

Da Sie in Ordnung sind, jquery zu verwenden,

var dataStr = "";
$('#tblData > tbody').each(function(e) {
  dataStr += $(this).text();
});
console.log(dataStr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tblData" class="table table-hover">
  <thead>
    <tr>
      <th>Date</th>
      <th>Time</th>
      <th>Treatment Number</th>
      <th>Cell Number</th>
      <th>Waste Container Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10101</td>
      <td>20202</td>
      <td>30303</td>
      <td>40404</td>
      <td>50505</td>
    </tr>
    <tr>
      <td>wowowo</td>
      <td>sksksk</td>
      <td>alalal</td>
      <td>qpqpqp</td>
      <td>zmzmzm</td>
    </tr>
  </tbody>
</table>

Wenn Sie möchten, dass das dataStr auch die <td> -Tags enthält, sollten Sie Folgendes verwenden:

dataStr += $(this).html()

BEARBEITEN

Wenn Sie auch auf den aktuellen Spaltenindex zugreifen möchten, können Sie diesen verwenden. Aber hier würde dataStr endlich eine einzelne Zeilenfolge enthalten, die alle Texte in <td> -Tags verkettet.

$('#tblData > tbody > tr > td').each(function(e) {
  var currentColNo = $(this).index();
  dataStr += $(this).html();
});
0
Chaya Sandamali 6 Aug. 2015 im 18:55

Dadurch erhalten Sie den gesamten Text aus der Tabelle <td> und können ihn in einem Textbereich veröffentlichen (nur zu Demonstrationszwecken):

$('#out').val($('#tblData td').text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblData" class="table table-hover">
    <thead>
        <tr>
            <th>Date</th>
            <th>Time</th>
            <th>Treatment Number</th>
            <th>Cell Number</th>
            <th>Waste Container Number</th>
        </tr>
   </thead>
   <tbody>
        <tr>
            <td>some</td><td>extra</td><td>data</td>
        </tr>
    </tbody>
</table>
<textarea id="out" rows=10 cols=60></textarea>

Update:

Wenn Sie "nur" den Inhalt von <td> in eine einzelne Variable einfügen möchten, können Sie Folgendes tun:

var str=$('#tblData td').text()

Ich habe Ihr Beispiel erweitert, damit Sie tatsächlich ein Ergebnis erhalten.

0
cars10m 6 Aug. 2015 im 17:28

Sie können es mit reinem js tun:

function Ard() {
    var table = document.querySelectorAll("#tblData tr th");
    var dataStr = "";
    for (var i = 0; i < table.length; i++) {
       dataStr += table[i].innerHTML;
    }
};

JSFiddle Demo

0
Jacob Gray 6 Aug. 2015 im 16:46

Mit jQuery können Sie alle Zeilen auswählen und über sie iterieren und den Text abrufen:

var str = "", values = [];
$("#tblData").find('tbody').find('tr').each(function() {
    //You can concatenate a string or push the values to an array
    str += $(this).text();
    values.push($(this).text());
});

console.log(str, values);
0
taxicala 6 Aug. 2015 im 16:37