jQuery Datatable：“編輯”按鈕

Question

我在jQuery Datatable添加了Edit按鈕。 當用戶單擊此按鈕時，該行變為可編輯的。 更新的行應該保存到MySQL DB，但是問題來了-更新的行沒有保存到DB。 Firebug不顯示任何錯誤消息。 有人可以幫我解決問題嗎？

<script type="text/javascript" charset="utf-8">
         $(document).ready(function(){
              $('#newspaper-b').dataTable({
              "sPaginationType":"full_numbers",
              "aaSorting":[[3, "asc"]],
              "bJQueryUI":true
              });
             $(".edit_but").click(function() {
              var ID=$(this).attr('id');
              $("#first_"+ID).hide();
              $("#last_"+ID).hide();
              $("#first_input_"+ID).show();
              $("#last_input_"+ID).show();
          });
             $(".edit_tr").change(function() {
                  var ID=$(this).attr('id');
                  var first=$("#first_input_"+ID).val();
                  var last=$("#last_input_"+ID).val();
                  var dataString = 'flightNum='+ ID +'&from='+first+'&STADate='+last;
                  $("#first_"+ID).html('<img src="load.gif" />'); // Loading image
                  if(first.length>0&& last.length>0) {
                  $.ajax({
                      type: "POST",
                      url: "callpage.php?page=tables/edit.php",
                      data: dataString,
                      cache: false,
                      success: function(html) {
                              $("#first_"+ID).html(first);
                              $("#last_"+ID).html(last);
                      }
                  });
                  } else
                  {
                    alert('All fields must be filled out.');
                  }
                });
              // Edit input box click action
              $(".editbox").mouseup(function() {
                return false
              });

              // Outside click action
              $(document).mouseup(function() {
                  $(".editbox").hide();
                  $(".text").show();
              });

              $("tr").click(function(){
                $(this).addClass("selected").siblings().removeClass("selected");
              });
     });
</script>

                <table id="newspaper-b" border="0" cellspacing="2" cellpadding="2" width = "100%">
                    <thead>
                        <tr>
                            <th scope="col">Flt Num</th>
                            <th scope="col">From</th>
                            <th scope="col">STA Date</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($result1 as $row):
                            $flightNum=$row['flightNum'];
                            $from=$row['frm'];
                            $STADate=$row['STADate'];
                        ?>
                        <tr id="<?php echo $flightNum; ?>" class="edit_tr">
                                                        <td><?php echo $row['flightNum'];?></td>
                            <td class="edit_td">
                                <span id="first_<?php echo $flightNum; ?>" class="text">
                                    <?php echo $from;?>
                                </span>
                                <input type="text" value="<?php echo $from;?>" 
                                       class="editbox" id="first_input_<?php echo $flightNum; ?>"/>
                            </td>
                            <td class="edit_td">
                                <span id="last_<?php echo $flightNum; ?>" class="text">
                                    <?php echo $STADate; ?>
                                </span> 
                                <input type="text" value="<?php echo $STADate; ?>" 
                                       class="editbox" id="last_input_<?php echo $flightNum; ?>"/>
                            </td>
                                                        <td class="edit_td"><?php echo $row['pkID']; ?></td>
                            <td id="<?php echo $flightNum; ?>" class="edit_but">
                                <div>
                                    <img src='images/edit.png' alt='Edit' />
                                </div>
                            </td>
                        </tr>
                        <?php endforeach;?>
                    </tbody>
                </table>    

edit.php

<?php
    include_once 'include/DatabaseConnector.php';
    if(isset($_POST['flightNum'])) {
        $flightnum=$_POST['flightNum'];
        $from=$_POST['from'];
        $STADate=$_POST['STADate'];
        $query = 'UPDATE flightschedule 
                  SET frm="'.$from.'",STADate="'.$STADate.'" 
                  WHERE flightNum="'.$flightNum.'"';
        DatabaseConnector::ExecuteQuery($query);
        echo '1';
    } else { 
        echo '0'; 
    }
?>

Answer 1

嘗試使用$（“。edit_tr input”）。change（）作為觸發器。

更改事件僅限於輸入，選擇和文本區域，但是您嘗試將其綁定到表行。 上面的代碼會將其綁定到該類所在行內的任何輸入。