2017-07-13 14 views
-1

Wird es als schlechte Methode angesehen, Daten von einer HTML-Seite, die keine <form> oder <input> Elemente enthält, an eine Backend-Anwendung zu senden?Daten aus einer Tabelle in HTML extrahieren?

Grundsätzlich habe ich eine Situation, in der ich einige Daten von einer HTML-Seite nehmen, sie an eine Backend-Anwendung übergeben, verarbeiten und dann einige resultierende Daten zurückgeben muss. Normalerweise hätte ich ein HTML-Formular, um die Daten zu extrahieren ... In meinem Fall bin ich jedoch mit nichts als einer Tabelle festgefahren. Auch die <table>, <tr> und <td> Elemente haben keine id. Was wäre der beste Weg, Daten aus dem HTML-Formular zu extrahieren, um sie mit Javascript zurückzusenden?

+0

Versuchen Sie, diese https://stackoverflow.com/questions/3248869/how-do-i-get-data-from-a-data-table-in-javascript –

Antwort

0

Hier nehme ich den Tabellenzeilenwert auf Klickereignis. Sie können sie mit Ajax-Post an den Server übergeben.

<!DOCTYPE html> 
<html> 
<body> 
    <table> 
    <thead> 
     <th>Firstname</th> 
     <th>Lastname</th> 
     <th>Age</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Jill</td> 
      <td>Smith</td> 
      <td>50</td> 
     </tr> 
     <tr> 
      <td>Eve</td> 
      <td>Jackson</td> 
      <td>94</td> 
     </tr> 
     <tr> 
      <td>John</td> 
      <td>Doe</td> 
      <td>80</td> 
     </tr> 
    </tbody> 
    </table> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      $("table tbody tr").on("click",function(e){ 
       var rowValue = $(this).context.innerText.split("\t"); 
       alert(rowValue); 
      }); 
     }); 
    </script> 
</body> 
</html> 
0

Sie können ein Array von Objekten erstellen, wobei jedes Objekt einen Index für eine Spalte hat, dessen Wert den inneren Text der Spalten festlegt.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>R1:C1</td> 
 
    <td>R1:C2</td> 
 
    <td>R1:C2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>R2:C1</td> 
 
    <td>R2:C2</td> 
 
    <td>R2:C2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>R3:C1</td> 
 
    <td>R3:C2</td> 
 
    <td>R3:C2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>R3:C1</td> 
 
    <td>R3:C2</td> 
 
    <td>R3:C2</td> 
 
    </tr> 
 
</table> 
 
<script> 
 
var data=[]; 
 
$('table tr').each(function(i ,e) 
 
{ 
 
    var row={}; 
 
    $(e).find("td").each(function(n,k) { 
 
    row[n]=$(k).text(); 
 
    }) 
 
    data.push(row); 
 
}); 
 
console.log(data); 
 
//Result 
 
/* 
 
[ 
 
    { 
 
"0": "R1:C1", 
 
"1": "R1:C2", 
 
"2": "R1:C2" 
 
    }, 
 
    { 
 
"0": "R2:C1", 
 
"1": "R2:C2", 
 
"2": "R2:C2" 
 
    }, 
 
    { 
 
"0": "R3:C1", 
 
"1": "R3:C2", 
 
"2": "R3:C2" 
 
    }, 
 
    { 
 
"0": "R3:C1", 
 
"1": "R3:C2", 
 
"2": "R3:C2" 
 
    } 
 
] 
 
*/ 
 
</script>

Verwandte Themen