编辑html表并保存到mysql

时间:2014-03-21 21:06:25

标签: php html mysql ajax edit

我从带有连接的php / mysql命令生成一些html表:

<table class="table table-bordered table-hover table-striped">
          <thead>
            <tr>
              <th>Société</th>
              <th>Année</th>
              <th>Tâche 1</th>
              <th>Tâche 2</th>
              <th>Tâche 3</th>
              <th>Tâche 4</th>
              <th>Tâche 5</th>
            </tr>
          </thead>
          <tbody>
            <?php 

   $tblst = $db->prepare("SELECT Livre_Societe.Nom_Societe, Mise_A_Jour.Code_NA, Annee, MAJ_1, MAJ_2, MAJ_3, MAJ_4, MAJ_5 FROM `Mise_A_Jour` JOIN `Livre_Societe` ON Mise_A_Jour.Code_NA = Livre_Societe.Code_NA");
   $tblst->execute();
   $line = $tblst->fetchAll(PDO::FETCH_ASSOC);

   foreach ($line as $row) {

    echo "<tr><td>". $row["Nom_Societe"]."</td><td>". $row["Annee"] ."</td><td class=\"edit\">". $row["MAJ_1"] ."</td><td class=\"edit\">". $row["MAJ_2"] ."</td><td class=\"edit\">". $row["MAJ_3"] ."</td><td class=\"edit\">". $row["MAJ_4"] ."</td><td class=\"edit\">". $row["MAJ_5"] ."</td></tr>";


   }     ?>

          </tbody>
        </table>

注意:每个可编辑的TD为class =“edit”

现在,一些JQuery / Ajax用于使这些TD可编辑:

$('td.edit').click(function(){                           
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax'); 
$(this).addClass('ajax');
$(this).html('<input id="editbox" size="'+
$(this).text().length+'" type="text" value="' +
$(this).text() + '">');
$('#editbox').focus();                                      
} );
$('td.edit').keydown(function(event){
 arr = $(this).attr('class').split( " " );
 if(event.which == 13)
 { 
    $.ajax({    type: "POST",
                url:"/inc/script/writeedit.php",
            data: "value="+$('.ajax input').val()+
                                    "&rownum="+arr[2]+"&field="+arr[1],
            success: function(data){
                 $('.ajax').html($('.ajax input').val());
                     $('.ajax').removeClass('ajax');
        }});
    }

});
$(document).on('blur','#editbox', function(){
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
});

我得到了一个由jquery调用的文件,如下所示:

<?php
if(isset($_POST['rownum']))
{
update_data($_POST['field'],$_POST['value'],$_POST['rownum']);
}

function update_data($field, $data, $rownum)
{

include  "../config/base.php";

$tblup = $db->prepare("update `Mise_A_Jour` set ".$field." = ".$data." where id = ".$rownum."");
$tblup->execute();

}
?>

我面临的问题是,从javascript控制台,php等等,一切都工作得很好,从某种意义上说我没有错误。但是,没有任何东西可以写入db。

我的想法是,问题与我的原始表格编辑是从JOIN进行而且php / mysql脚本的写入部分不理解正确的命令或者不知道在哪里正确写入这一事实有关数据。

BTW,JQuery取自此页面:http://www.iwebux.com/inline-edit-using-ajax-in-jquery/

1 个答案:

答案 0 :(得分:1)

这是我刚写完的一个快速而又脏的PHP解决方案。应该给你一个好的起点。不需要AJAX / Jquery。

<?php
//PLACE THIS IN PAGE HEAD
if(isset($_POST['submit'])) {
    $update_id = $_POST['id'];
    $query = "UPDATE table 
              SET col1 = {$_POST['col1']}, 
                  col2 = {$_POST['col2']}, 
                  col3 = {$_POST['col3']}
              WHERE unique_id = {$update_id}";
    $result_set = mysql_query($query,$connection);
}
?>

<table>
<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td></td>
<?php
$query = "SELECT unique_id, col1, col2, col3 FROM table";
$result_set = mysql_query($query,$connection);
while($result = mysql_fetch_assoc($result_set)) {
    $id = $result['id'];
    $col1 = $result['col1'];
    $col2 = $result['col2'];
    $col3 = $result['col3'];
    echo "<form action='thisPage.php' method='POST'>";
    echo "<tr>
              <td><input type='text' name='col1' value='{$col1}'/></td>
              <td><input type='text' name='col2' value='{$col2}'/></td>
              <td><input type='text' name='col3' value='{$col3}'/></td>
              <td><input type='submit' name='submit' value='Submit'/><input type='hidden' name='id' value='{$id}'/></td>
          </tr>";
    echo "</form>";
}
?>
</table>