这是一个复杂的javascript

Question

我正在尝试为MySQL表创建管理员界面。我正在使用PHP将整个表格数据打印到输入字段中，并希望将编辑后的更改保存回表格。我的问题：

如何使用POST方法再次将这些参数作为表单数据传递？
如何单独找出受影响的行并保存更改？
如何检查和删除所选行？

PHPMyAdmin执行类似的任务。所以我很确定这是设计管理员界面时常见的情况。

修改

这是我用来打印表格的代码（注意，这只是一个片段，提供我想要实现的目标）：

$query = "SELECT * FROM mytable";
$result = mysqli_query($con, $query);
echo "<td>".$row['id']."</td>
<td><input type='text' value='".$row['name']."'></td>
<td><input type='text' value='".$row['company']."'></td>
<td><input type='text' value='".$row['contact']."'></td>
<td><input type='text' value='".$row['website']."'></td>
<td><input type='text' value='".$row['category']."'></td>
<td><input type='text' value='".$row['subcategory']."'></td>
<td><input type='text' value='".$row['comments']."'></td>";

我现在仍然坚持这个，无法继续。

Answer 1

提交表单后，您将获得POST数据，而不是之前。您还需要提供<input type="submit">和有效的PHP页面来接受和处理该响应。
您可以使用JavaScript，禁用自初始化以来未更改的所有字段，然后它们将不会作为POST数据发送。
简单，让<input type="checkbox">将行的ID作为值，如果已选中，则删除该行。

我不是勺子喂养的粉丝。我给了你一个大方向，好好思考，并研究如何实现它。

Answer 2

哇，您想要通过询问如何在浏览器上创建看似相当于html网络传输的问题来复制社区驱动项目的功能，其中包含1000个工时投入。好的，先来我的假设

没有太多记录，少于100
表格列name是每一行的唯一标识符（无重复项）
您对每个帖子请求发送大量数据并不感到不舒服
您将处理服务器端的转义

thetemplatemaker.php

这里我们创建填充模板的变量。这里的想法是创建可以为我们的处理脚本保存足够信息的表单元素。输入字段应如下所示

<input type="text" name="c[uniqueID][colName]" value="an escaped string" />

我随后添加了一个特殊的复选框，可以在服务器端进行过滤，以仅处理已检查的行，无需每次都处理整个表。你也可以在这里用Ajax做一些额外的花哨的东西。瞧，你去吧

<?php
// assume these are the table attributes
$sqlColNames = 'name,company,contact,website,category,subcategory,comments';
$query = 'SELECT '.$sqlColNames.' FROM mytable';
// assume $con is your database link
$result = mysqli_query($con,$query);
$cols = explode(',',$sqlColNames);
$tRows = array();
while ($row = mysqli_fetch_assoc($result)) {
  $tData = array();
  // assume col:name is a unique identifier for each row
  $id = 'c['.$row['name'].']';
  $tData[] = '<input type="checkbox" name="'.$id.'[process]" value="1">';
  foreach ($cols as $col) {
    $tData[] = '<input type="text" name="'.$id.'['.$col.']" value="'.htmlspecialchars($row[$col]).'">';
  }
  $tRows[] = '<td>'.implode('</td><td>',$tData).'</td>';
}
// the only template variables we need
$tRows = '<tr>'.implode('</tr><tr>',$tRows).'</tr>';
$hRow = '<tr><th>&nbsp;</th><th>'.implode('</th><th>',$cols).'</th><tr>';

thetemplate.php

这是一个简单的表格模板

<form method="post" action="your/processing/script.php">
  <input type="hidden" name="someKey" value="someVal" />
  <table>
    <thead><?php echo $hRow; ?></thead>
    <tbody><?php echo $tRows; ?></tbody>
  </table>
  <button type="submit">Submit Changes</button>
</form>

处理脚本

好的，现在用户按下按钮，然后调用脚本。幸运的是，发送了所有数据

位于$_POST['c']，
每一行都是$_POST['c'][$uniqueNameOrId]，
每个值都是$_POST['c'][$uniqueNameOrId]['colName']

您现在可以执行以下迭代来遍历数据

foreach ($_POST['c'] as $id => $row) {
  // if you didn't hit the checkmark you don't get processed
  if (!isset($row['process'])) continue;
  // $row holds all the info for each column - Neat!
}

这是一个复杂的javascript

未经测试且尚未完成。未实现脚本的ajax部分，也未配置响应处理程序。看看这个问题背后的复杂性

使复选框仅过滤要发送到服务器的行
设置一个事件处理程序侦听以更改复选框状态，保存行索引以帮助使用过滤器
更改表单提交操作的默认行为（我们不想发送所有内容）
设置过程以从索引的每一行检索所有输入数据
发出ajax post请求，将所有数据发送到服务器进行处理
处理来自服务器的响应
做一些清理

正如您所看到的，手头的任务非常庞大，而这不是唯一的方法

(function(){
  var
    // php handler script, receives the ajax call and returns a JSON response
    url = 'http://your/handler/script.php',
    // this is a hack, I'm sure this can be done some other way'
    re_getColName = /\[([^\]]+)\]$/,
    // hold rowIndexes for fetching their contents later, this can also be done differently
    checkedRows = [],
    // the <form> DOMElement node
    form,
    // the <tbody> DOMElement node container of the rows
    tbody,
    // a convenient function to retrieve input values
    gatherRowContent,
    // a convenient function that returns all data by rows into an array
    gatherData,
    // a bunch of event handlers
    onChecked,
    // a special event handler, it captures all clicks in <tbody> but chains only checkboxes
    //  event delegation is important because there are too many checkboxes to setup
    onDelegatedClick,
    // not a page event handler, this is run once the server has completed the ajax response
    onResponseReceived,
    // capture submit and send through ajax
    onSubmit,
    // convenient window event handlers
    onLoad, onUnload;
  gatherRowContent = function (row) {
    var data = {};
    [].forEach.call(row.querySelectorAll('input[type="text"]'),function(input){
      //this is very bad for performance, there must be another way
      data[re_getColName.match(input.name)[0]] = input.value;
    });
    return data;
  };
  gatherData = function () {
    var
      rowData = [],
      nodeList = tbody.childNodes;
    checkedRows.forEach(function(rowIndex){
      rowData.push(gatherRowContent(nodeList[rowIndex]));
    });
    return rowData;
  };
  onChecked = function (checkbox) {
    var idx = checkbox.parentNode.parentNode.rowIndex;
    checkbox.checked ? checkedRows.push(idx) : checkedRows.splice(checkedRows.indexOf(idx),1);
  };
  onDelegatedClick = function (event) {
    var targetNode = event.target;
    if (targetNode.tagName === 'INPUT' && targetNode.type === 'checkbox') {onChecked(targetNode);}
  };
  onSubmit = function (event) {
    event.preventDefault();
    var data = gatherData();
    // possibly make data a large json or just pass it into jquery
    // make an ajax request and pass the data to the server
    // this is for homework, I recommend using jQuery but there are many other options
  };
  onResponseReceived = function (someSignature) {
    // handle the ajax response data
    // possibly do some other global things like uncheck all checked checkboxes (say that 3 times out loud)
  };
  onLoad = function () {
    form = document.getElementById('formSpreadsheet');
    tbody = document.getElementById('spreadsheet');
    tbody.addEventListener('click',onDelegatedClick,false);
    form.addEventListener('submit',onSubmit,false);
  };
  onUnload = function () {
    tbody.removeEventListener('click',onDelegatedClick,false);
    form.removeEventListener('load',onLoad,false);
    form = tbody = null;
  };
  window.addEventListener('load',onLoad,false);
  window.addEventListener('unload',onUnload,false);
}());

有任何问题吗？请问

使用PHP接口修改完整的MySQL表数据

2 个答案:

thetemplatemaker.php

thetemplate.php

处理脚本

这是一个复杂的javascript