如何使用JavaScript从HTML表格的单元格中获取值 [英] How to grab the values from an HTML table's cells using JavaScript

问题描述

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

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.

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

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.

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

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.

例如，如果我有一个MySQL表中的3行数据，字段ID和金额，值如下，如何获取3和1.99？：

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"?:

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

以下是表格，提交按钮和onclick调用的PHP / HTML代码示例：
（这是一个非常我的实际代码的简化版本，但应传达这个想法）

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)

<?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函数示例table：

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

推荐答案

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

更新以解决Elliots评论

参见如何获取（innerText和data-value） / 5 / show /rel =nofollow>我的新演示

How to grab cell values from a table?

Update to address Elliots comment

See how to grab the cell value (innerText and data-value) in my new demo

在表中属性 data-value 用于存储一些数据（2B，3C，..）。

In the table the attribute data-value is used to store some data (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和右选择器，您可以迭代每个单元格：

With jQuery and the right selector you can iterate over each cell:

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

这篇关于如何使用JavaScript从HTML表格的单元格中获取值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！