Question

我有一个页面在我的SQL DB中显示一个大表，每个单元格都是一个HTML输入。目标是制作一个可编辑的sql表，根据大表格中特定单元格中的更改来更新我的SQL DB。我想要在发生单元格更改时创建一个触发JS函数的脚本，以更新特定的更改。可能吗？还有其他想法吗？

这是我的想法草案。问题是呈现表的While循环

 <script>
 $(document).ready(function(){
    $('#testnum').on('change', 'input', function(){
          $.post("getter.php",{###Don't know what to put here###);
    });
 });
  </script>


 <?php
    while($res=mysqli_fetch_array($result))
        {
         echo "<tr>
         <td onchange='changeit(fin)'>
         <div name='fin' style='display:none;'> ".$res['first'] ."</div>
         <input type='int' value=".$res['first'].">
        </td>
        <td onchange='changeit(sta)'>
            <div name='sta' style='display:none;'>".$res['second']."</div>
            <input type='int' value=".$res['second'].">
            </td>
            <td>";
    ?>

修改

例如 - 如果我改变他的城市，我怎么能通过大卫的身份证？（此表打印有WHILE语句）

ID    name     city
-------------------
1     David    NY
--------------------
2     John     LA
-------------------
3     Adam     NJ

如果我将大卫的城市改为＆＃34;伦敦＆＃34;例如，我想发送3件事：

1）ID - 所以我知道哪一个特定的行。（在这种情况下 - ＆＃34; 1＆＃34;）

2）列名 - 所以我可以知道哪个列已更改。（在这种情况下 - ＆＃34;城市＆＃34;）

3）更改后的数据 - 所以我知道要更新的内容。（在这种情况下 - ＆＃34;伦敦＆＃34;）

Answer 1

您好，您可以使用与此类似的内容，您需要根据您的代码和需求进行调整。

HTML文件：

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Check</title>
</head>

<body>

<table>
  <tbody>
    <tr class="row">
      <td class="col id"><input class="txtdata" name="id" value="1"></td>
      <td class="col name"><input class="txtdata" name="name" value="Jhon"></td>
      <td class="col city"><input class="txtdata" name="city" value="NY"></td>
    </tr>
    <tr class="row">
      <td class="col id"><input class="txtdata" name="id" value="2"></td>
      <td class="col name"><input class="txtdata" name="name" value="Jane"></td>
      <td class="col city"><input class="txtdata" name="city" value="LA"></td>
    </tr>
  </tbody>
</table>

</body>
<script type='text/javascript' src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
</html>

<script>
$(document).ready(function($) {
  $('.txtdata').on('change', function(){
    var parent = $(this).parent('.col').parent('.row');
    var id = $(parent).find('.id').find('input').val();
    var name = $(parent).find('.name').find('input').val();
    var city = $(parent).find('.city').find('input').val();
    var attribChanged = $(this).attr('name');
    data = {id: id, name: name, city: city, attribChanged: attribChanged};
    $.post('getter.php', data, function(data){
      $(parent).html(data);
    });
  });
});
</script>

PHP文件：

<?php 
$name = $_REQUEST['name'] . '(mod)';
$id = $_REQUEST['id'] . '(mod)';
$city = $_REQUEST['city'] . '(mod)'; 
echo '<td class="id"><input class="txtdata" name="id" value="'.$id.'"></td>
      <td class="name"><input class="txtdata" name="name" value="'.$name.'"></td>
      <td class="city"><input class="txtdata" name="city" value="'.$city.'"></td>';
?>

Answer 2

PHP文件：

<?php
  echo '<table>';
  while($res=mysqli_fetch_array($result)){
    echo '<tr>';
      echo '<td>$res['id']</td>';
      echo '<td onchange="changeit($res['id'], \'name\', this)"><input type="text" value="$res['name']"/></td>';
      echo '<td onchange="changeit($res['id'], \'city\', this)"><input type="text" value="$res['city']"/></td>';
    echo '</tr>';
  }
  echo '</table>';

Jquery的：

function changeit(id, field, element){
  var newVal = element.find('input').val();
  $.post("getter.php",{
    "id": id,
    "field": field,
    "newVal": newVal
  }, function(result){
     if(result == 'success'){
       alert('id: '+ id);
       alert('column: '+ field);
       alert('what change: '+ newVal);
     }
  });
}

PHP文件getter.php：

$id = $_POST['id'];
$field = $_POST['field'];
$newVal = $_POST['newVal'];
$sql = mysql_query("UPDATE table_name SET $field = $newVal WHERE id = $id");
if($sql) echo 'success'; else echo '0';

希望对你有所帮助。

更新基于特定onChange的mySql

修改

2 个答案: