0

クライアント側で生成された動的テーブル データをデータベースに保存する必要があります。

私の動的テーブルは次のとおりです。

<table class="table" id = "myTable">
      <thead>
          <tr>
            <th>Roll No</th>
            <th>Student Name</th>
            <th>Attendance</th>
          </tr>
      </thead>
      <tbody>
          <?php foreach($results as $students) {?>
          <tr id="<?= $students->roll_no;?>" align ="center">
            <td><?= $students->roll_no;?></td>
            <td><?= $students->full_name;?></td>
            <td><input type="radio" id="att" name="attendance" value="present">Present
<input type="radio" id="att" name="attendance" value="absent">Absent</td>
          </tr>
          <?php } ?>                                                        
      </tbody>
    </table>
    <input type="submit" onClick="savedata()" name="submit" value="SAVE">

ここでのひねりは、3 番目の列でラジオ ボタンを使用しているため、SUBMIT でチェック済みの値を渡す必要があることです。

私が使用しているJavaScriptコード（参照：Stackoverflowの回答）は次のとおりです。

function savedata() { var oTable = document.getElementById('myTable'); //テーブルを取得

      var rowLength = oTable.rows.length;
      //gets rows of table

      for (i = 1; i < rowLength; i++){
      //loops through rows

         var oCells = oTable.rows.item(i).cells;
         //gets cells of current row
         var cellLength = oCells.length;
             for(var j = 0; j < cellLength; j++){
             //loops through each cell in current row
                <!--get your cell info here-->
                if(j == cellLength-1)
                {
                      var cellVal = $('input[name="attendance"]:radio:checked');
                      alert(cellVal);
                                        // store it in array here
                                       radioarr = [oTable.rows.item(i).cells,oCells.item(j).innerHTML]; 
                }
                else
                {
                      var cellVal = oCells.item(j).innerHTML;
                      alert(cellVal);
                                        // store it in array here 
                                       fieldarr = [oTable.rows.item(i).cells,oCells.item(j).innerHTML];
                }
             }

      }
  }
  $.ajax{

      // Pass the data to another page insert.php and store it in the database
  }
</script>

だから私がする必要があるのは..キーと値のペアを作成して配列に保存し、それをajaxリクエストとして渡し、同じものをデータベースに挿入します。

問題 ：

  1. チェックされたラジオボタンが配列に格納されていません

  2. 2D 配列を作成し、そこにすべてのデータを格納する必要があり、[object,object] を示すように作成しました

  3. ajax リクエストを使用してこの配列を別のページに渡し、データベースに保存する必要があります。

どうすればこれを行うことができますか？

前もって感謝します。NC

4

2 に答える 2

1

これが解決策です..いくつかのエラーを修正するためにコードを修正しました..

<table class="table" id = "myTable">
  <thead>
      <tr>
        <th>Roll No</th>
        <th>Student Name</th>
        <th>Attendance</th>
      </tr>
  </thead>
  <tbody>
      <?php foreach($results as $students) {?>
      <tr id="<?= $students["roll_no"];?>" align ="center">
        <td id="roll_no"><?= $students["roll_no"];?></td>
        <td id="full_name"><?= $students["full_name"];?></td>

         <!-- Attendance has to be unique for each row -->
        <td id="attendance"><input type="radio" id="att" name="attendance_<?= $students["roll_no"] ?>" value="present">Present
            <input type="radio" id="att" name="attendance_<?= $students["roll_no"]?>" value="absent">Absent</td>
      </tr>
      <?php } ?>                                                        
  </tbody>
</table>


  <script>

    function savedata() { 
        var roll_no = "";
        var jsonObject = '[';
        var oTable = document.getElementById('myTable');
    //gets table

    var rowLength = oTable.rows.length;
    //gets rows of table

    for (i = 1; i < rowLength; i++){
    //loops through rows
        jsonObject += "{";
       var oCells = oTable.rows.item(i).cells;
       //gets cells of current row
       var cellLength = oCells.length;
           for(var j = 0; j < cellLength; j++){

           //loops through each cell in current row
              <!--get your cell info here-->
              //added cell name so that I can create json id
              var cellName = oCells.item(j).id;
              var cellVal = oCells.item(j).innerHTML;

              if(j==0)
                  roll_no = cellVal;
              if(cellVal.search('radio')>0){
                  var cellVal = $('input[name="attendance_'+roll_no+'"]:radio:checked').val();
              }
              // A dirty way to creat json
              jsonObject += '"' +cellName + '":"' + cellVal + '",';

           }
           jsonObject = jsonObject.slice(0,jsonObject.length-1);
           jsonObject += '},';
        }
        jsonObject = jsonObject.slice(0,jsonObject.length-1);
        jsonObject += ']';

       // the json looks like this for 3 rows depending on what radio button u select
       // [{"roll_no":"10","full_name":"Name 1","attendance":"present"},{"roll_no":"14","full_name":"Name 2","attendance":"absent"},{"roll_no":"18","full_name":"Name 3","attendance":"present"}]

        //send this data to a php page
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data:"json=" + jsonObject,
            processData: false, 
            dataType: 'json'
        });

      }
</script>

ajax.php は、json データを投稿するファイルです。

<?php

    $value = json_decode(stripslashes($_POST["json"])); 
    print_r($value);
?>

ajax.php 内で、このデータをデータベースやテキスト ファイルに保存するためのコードを記述できます。印刷すると、次の出力が得られます。

Array
(
[0] => stdClass Object
    (
        [roll_no] => 10
        [full_name] => Name 1
        [attendance] => present
    )

[1] => stdClass Object
    (
        [roll_no] => 14
        [full_name] => Name 2
        [attendance] => absent
    )

[2] => stdClass Object
    (
        [roll_no] => 18
        [full_name] => Name 3
        [attendance] => present
    )
)

これは最も醜い方法です。JQuery のみを使用することで、はるかに少ない行数でより効率的に実行できます。提供されたコードを使用してどのように実行できるかを示したかっただけです。ご不明な点がございましたら、お知らせください。

ディンス

編集済み...

これを行うより良い方法

function savedata1() { 

var obj = $('#myTable tbody tr').map(function() {
    var $row = $(this);
    var roll = $row.find(':nth-child(1)').text();
    var atd = $row.find('td input[name="attendance_'+roll+'"]:radio:checked').val()
    return {
        roll_no: $row.find(':nth-child(1)').text(),
        full_name: $row.find(':nth-child(2)').text(),
        attendance: atd
    };
}).get();

 $.ajax({
        type: "POST",
        url: "ajax.php",
        data:"json=" + JSON.stringify(obj),
        processData: false, 
        dataType: 'json'
    });

}
于 2013-03-31T09:05:30.430 に答える
0

PHPファイルでjsonをデコードする必要はありません

 $value = stripslashes($_POST["json"]);
于 2013-05-08T11:22:25.497 に答える