Как получить значения из ячеек таблицы HTML, используя JavaScript

Я пытаюсь получить значения ячеек из таблицы HTML, чтобы сохранить их в таблице MySQL с помощью вызова PHP. Я хотел бы использовать JavaScript, а не JQuery.

Я даю каждому TR отдельный идентификатор на основе поля идентификатора таблицы MySQL. Кроме того, каждая входная ячейка TD имеет уникальный идентификатор, основанный на поле идентификатора таблицы MySQL. Не уверен, что мне все это нужно, но я их использовал.

Как получить значение ячейки, чтобы я мог передать его в процедуру PHP (я знаю, как кодировать этот PHP), чтобы сохранить данные в MySQL? Мой код JavaScript ниже захватывает "innerHTML", но вместо этого мне нужно получить значение ячейки.

Например, если у меня есть 3 строки данных из таблицы MySQL, с полями id и amount, со значениями ниже, как мне получить "3" и "1.99"?:

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

Вот пример кода PHP/HTML для таблицы, кнопки отправки и вызова onclick:(это очень упрощенная версия моего реального кода, но она должна передать идею)

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

А вот пример моей функции 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;
    }
}
Источник

4 ответа

Решение

Как получить значения ячеек из таблицы?

Обновление по адресу Elliots комментарий

Посмотрите, как получить значение ячейки (innerText и data-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(" | "); 
}
Источник

Использовать innerText собственность для td, Вот скрипка, которая показывает, как ее использовать.

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);​
Источник

Оповещение 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>
Источник

Поместите идентификаторы на ваши входы с некоторым шаблоном. например <input type="text" id="input_0_0" name="whatever" /> где 0 ряд и второй 0 это столбец, а затем вместо вашего типа оповещения

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

Это должно помочь Вам начать

Источник
Другие вопросы по тегам