1

HTMLテーブルからセル値を取得して、PHPの呼び出しを介してMySQLテーブルに保存できるようにしようとしています。jQueryではなくJavaScriptを使用したいのですが。

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

4 に答える 4

3

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);​
于 2012-10-25T18:40:28.387 に答える
2

テーブルからセルの値を取得する方法は?

エリオッツのコメントに対応するための更新

私の新しいデモでセル値(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(" | "); 
}
于 2012-10-25T19:36:40.043 に答える
0

いくつかのパターンで入力にIDを配置します。たとえば<input type="text" id="input_0_0" name="whatever" />、0は行、2番目0は列で、代わりにアラートタイプです。

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

それはあなたが今転がるのを助けるはずです

于 2012-10-25T18:38:04.710 に答える