<form>または<input>要素を含まないHTMLページから、バックエンドアプリケーションにデータを送信するのは悪い習慣ですか？テーブルからhtml形式でデータを抽出していますか？
基本的には、HTMLページからデータを取り出し、バックエンドアプリケーションに渡して処理し、結果データを返さなければならない状況があります。通常、私は、データを抽出するために、ある種のhtml形式を持っています...しかし、私の場合は、テーブルだけが残っています。また、<table>、<tr>、および<td>の要素には、idが含まれていません。何がjavascriptを使用して返信するために、HTMLフォームからデータを抽出する最良の方法は？
ここでは、クリックイベントのテーブル行の値を取ります。あなたはajax投稿を使ってそれらをサーバーに渡すことができます。
<!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>
あなたが列内のテキストを設定し、その値を持つ列へのインデックスを有する各オブジェクトにオブジェクトの配列を作成することができます。
<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>
https://stackoverflow.com/questions/3248869/how-do-i-get-data-from-a-data-table-in-javascriptこれを試してみてください –