如何使用 JavaScript 从 HTML 表格的单元格中获取值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13074973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to grab the values from an HTML table's cells using JavaScript
提问by Elliot
I'm trying to grab the cell values from an HTML table so that I can save them into a MySQL table via a call to PHP. I'd like to use JavaScript rather than jQuery.
我试图从 HTML 表中获取单元格值，以便我可以通过调用 PHP 将它们保存到 MySQL 表中。我想使用 JavaScript 而不是 jQuery。
I'm giving each TR a distinct ID based on the MySQL table's ID field. Also, each TD input cell has a unique ID based on the MySQL table's ID field. Not sure if I need all those, but I used them.
我根据 MySQL 表的 ID 字段给每个 TR 一个不同的 ID。此外，每个 TD 输入单元格都有一个基于 MySQL 表的 ID 字段的唯一 ID。不确定我是否需要所有这些，但我使用了它们。
How do I grab the cell's value so that I can pass it to a PHP procedure(I know how to code this PHP) to save the data into MySQL? My JavaScript code below grabs the "innerHTML" but I need to grab the cell value's instead.
如何获取单元格的值，以便我可以将它传递给 PHP 过程（我知道如何编写此 PHP 代码）以将数据保存到 MySQL 中？我下面的 JavaScript 代码获取了“innerHTML”，但我需要获取单元格值。
For example, if I have 3 rows of data from a MySQL table, with fields id and amount, with values below, how do I grab the "3" and the "1.99"?:
例如，如果我有来自 MySQL 表的 3 行数据，字段为 id 和数量，值如下，我如何获取“3”和“1.99”？：
id amount
-------------
1 100.00
2 9.99
3 1.99
Here is a sample of the PHP/HTML code for the table, submit button and onclick call:(this is a very simplified version of my actual code but should convey the idea)
这是表格、提交按钮和 onclick 调用的 PHP/HTML 代码示例：（这是我实际代码的非常简化的版本，但应该传达这个想法）
<?php
/* define mysql database connect, query and execute it returning result set into $result, id=integer primary key, is_active=tinyint(0 or 1), amount=decimal(12,2) */
/* ... */
/* output form/table */
echo "<form id='myform' name='myform' >" ;
echo "<table id='mytable' name='mytable'>" ;
while($row = mysql_fetch_array($result))
{
$id = $row['id'] ;
$amount = $row['amount'] ;
$tr_id = "tr_id_" . trim((string)$id) ;
$td_id = "td_id_" . trim((string)$id) ;
$td_amount_id = "td_amount_id_" . trim((string)$id) ;
$input_amount_id = "input_amount_id_" . trim((string)$id) ;
echo "<tr id='$tr_id' name='$tr_id'>";
echo "<td id='$td_id_account' > $id </td>" ;
echo "<td id='$td_amount_id' > <input type='text' id='$input_amount_id' value=$amount > $amount </td>" ;
echo "</tr>";
}
echo "</table>";
echo "</form>" ;
/* submit button and onclick call */
echo "<br />" ;
echo "<table>";
echo "<tr>" ;
echo "<td>";
echo "<button type='button' " . 'onclick="SubmitTableData(\'' . "mytable" .'\');"' . ">Submit</button>" ;
echo "</td>" ;
echo "</tr>";
echo "</table>";
?>
And here is a sample of my JavaScript function used to loop through the rows of the HTML table:
这是我的 JavaScript 函数示例，用于遍历 HTML 表的行：
function SubmitTableData(TableID)
{
var table = document.getElementById(TableID);
for (var i = 0, row; row = table.rows[i]; i++)
{
// iterate through rows
for (var j = 0, col; col = row.cells[j]; j++)
{
// iterate through columns
alert(col.innerHTML);
}
/* call PHP procedure with row's cell values as parameters */
/* ... */
break;
}
}
回答by juan.facorro
Use the innerTextproperty for the td. Here's a fiddlethat shows how to use it.
将该innerText属性用于td. 这是一个展示如何使用它的小提琴。
HTML
HTML
<table>
<tr>
<td id="1">Bla</td>
<td id="2"><input id="txt" />Ble</td>
</tr>
</table>?
JavaScript
JavaScript
var td = document.getElementById('1');
alert(td.innerText);
var td2 = document.getElementById('2');
alert(td2.innerText);?
回答by surfmuggle
How to grab cell values from a table?
如何从表格中获取单元格值？
Update to address Elliots comment
更新以解决 Elliots 评论
See how to grab the cell value(innerText and data-value) in my new demo
在我的新演示中查看如何获取单元格值（innerText 和 data-value）
In the table the attribute data-valueis used to store some data (2B, 3C,..).
在表中，该属性data-value用于存储一些数据（2B、3C、..）。
<table id="t2">
<thead>
<tr id="tr1"><th>Student Name<th>Course</tr>
</thead>
<tbody>
<tr id="tr2"><td data-value="2B">Bert2 <td>Economics </tr>
<tr id="tr3"><td data-value="3C">Clyde3 <td>Chemics </tr>
<tr id="tr4"><td data-value="4D"> <td>Digital Art</tr>
<tr id="tr5"><td data-value="5E">Ernest <td>Ecmoplasma </tr>
</tbody>
</table>
With jQuery and the right selector you can iterate over each cell:
使用 jQuery 和正确的选择器，您可以遍历每个单元格：
function eachCell(){
var cellInnerText = [];
var cellValue = [];
var out = document.getElementById("out");
var out2 = document.getElementById("out2");
// iterate over each row in table with id t2 in the table-body (tbody)
$('#t2 tbody tr').each(function(index){
// copy the text into an array
cellInnerText.push($(":first-child", $(this)).text());
//copy the data-value into an array
cellValue.push($(":first-child", $(this)).attr('data-value'));
});
// show content of both arrays
out.innerHTML = cellInnerText.join(" | ");
out2.innerHTML = cellValue.join(" | ");
}
回答by Alvar FinSoft Soome
Place IDs on Your inputs with some pattern. for example <input type="text" id="input_0_0" name="whatever" />where 0is row and second 0is column and then instead your alert type
使用某种模式将 ID 放在您的输入上。例如<input type="text" id="input_0_0" name="whatever" />，哪里0是行，第二个0是列，然后是您的警报类型
v = document.getElementById('input_'+row+'_'+col).value;
It should help You get rolling now
它应该可以帮助你现在开始滚动
回答by Optimaz ID
Alert the innerHTML of the first cell in the table's first row
提醒表格第一行第一个单元格的innerHTML
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Click the button to alert the innerHTML of the first cell (td element with index 0) in the table's first row.</p>
<table id="myTable">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert(document.getElementById("myTable").rows[0].cells[0].innerHTML);
}
</script>
</body>
</html>
