如何使用 JavaScript 从 HTML 表格的单元格中获取值答案

【问题标题】：How to grab the values from an HTML table's cells using JavaScript如何使用 JavaScript 从 HTML 表格的单元格中获取值
【发布时间】：2012-10-16 00:19:30
【问题描述】：

我正在尝试从 HTML 表中获取单元格值，以便通过调用 PHP 将它们保存到 MySQL 表中。我想使用 JavaScript 而不是 jQuery。

我根据 MySQL 表的 ID 字段为每个 TR 分配一个不同的 ID。此外，每个 TD 输入单元格都有一个基于 MySQL 表 ID 字段的唯一 ID。不确定我是否需要所有这些，但我使用了它们。

如何获取单元格的值，以便可以将其传递给 PHP 程序（我知道如何编写 PHP 代码）以将数据保存到 MySQL 中？我下面的 JavaScript 代码抓取了“innerHTML”，但我需要抓取单元格值。

例如，如果我有来自 MySQL 表的 3 行数据，字段 id 和 amount，值如下，我如何获取“3”和“1.99”？：

id    amount
-------------
1     100.00
2     9.99
3     1.99

以下是表格、提交按钮和 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>";         
?>

下面是我用来循环遍历 HTML 表格行的 JavaScript 函数示例：

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;
    }
}

【问题讨论】：

你为什么要这样做？必须有一种更简单的方法来完成你想要完成的事情。另外，请发布 生成的 HTML 表格，而不是生成它的 php。
我的眼睛.. 看起来非常复杂，无缘无故

标签： javascript php html html-table cell

【解决方案1】：

使用某种模式在您的输入上放置 ID。例如<input type="text" id="input_0_0" name="whatever" /> 其中0 是行，第二个0 是列，然后是您的警报类型

v = document.getElementById('input_'+row+'_'+col).value;

它应该可以帮助你现在开始滚动

【讨论】：

【解决方案2】：

提醒表格第一行第一个单元格的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>

【讨论】：

【解决方案3】：

如何从表格中获取单元格值？

更新以解决 Elliots 评论

参见my new demo 中的how to grab the cell value（内部文本和数据值）

在表格中，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>

使用 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(" | "); 
}

【讨论】：

感谢您的回复。如果每个 td 中都有一个值，您将如何抓取它而不是显示文本，例如，在下表中，您将如何抓取 1、9、33 而不是 Red、Green、Blue？ id color 1 红色 2 绿色 3 蓝色
@Elliot 请看一下我的新演示，如果这能回答您的问题，请告诉我。

id	color
1	红色
2	绿色
3	蓝色

【解决方案4】：

将innerText 属性用于td。这是一个fiddle，它展示了如何使用它。

HTML

<table>
    <tr>
        <td id="1">Bla</td>
        <td id="2"><input id="txt" />Ble</td>
    </tr>
</table>

JavaScript

var td = document.getElementById('1');
alert(td.innerText);
var td2 = document.getElementById('2');
alert(td2.innerText);

【讨论】：