Question

我有一个编辑按钮，可以在我目前拥有的HTML表格的每一行中单击。

目前，当我点击“编辑”时，我可以编辑相应行和列中的单元格，但是当我再次单击该按钮（即保存按钮）时，它将不会读取输入的值。我没有得到任何我能看到的错误，但是在我的JavaScript中我做了console.log(type)而输出是delete让我非常困惑。它应该是我的switch语句中的case值，因此在这种情况下它应该是group_id和sku_group。然后我再做一个console.log(dict)，日志中的输出是Object {}，所以它看起来不像是记录行值。我也在日志中获得了一个成功的行更新消息，所以我肯定认为只是能够获取行中的值才能被读取。

所以我的问题是如何让它读取值并成功更新数据库中的信息。

HTML / PHP表：

<table id="skuTable" cellspacing="5" class="ui-widget ui-widget-content">
    <thead>
        <tr class="ui-widget-header">
            <th class="skuRow">SKU Group</th>
            <th class="skuRow">Group ID</th>
            <th class="skuRow">Edit</th>
            <th class="skuRow">Delete</th>
        </tr>
    </thead>
    <tbody>

        <?php foreach ($dbh->query($sql_table) as $rows) { ?>

        <tr>
            <td class="sku_group" id="sku_group-<?=intval ($rows['SKU Group'])?>"><?php echo $rows['SKU Group']?></td>
            <td class="group_id" align="center" id="group_id-<?=intval ($rows['Group_ID'])?>"><?php echo $rows['Group_ID']?></td>
            <td><input type="button" class="edit" name="edit" value="Edit"></td>
            <td><input type="button" class="delete" value="Delete" onclick="deleteRow(this)"></td>
        </tr>
    <?php
        }
    ?>
    </tbody>
</table>

用于编辑功能的JavaScript：

// ----- Edit Row -----

$(document).on("click", "#skuTable .edit", function () {
  var $this = $(this);
  var tds = $this.closest('tr').find('td').filter(function () {
    return $(this).find('.edit').length === 0;
  });
  if ($this.val() === 'Edit') {
    $this.val('Save');
   if($this.id !== '.sku_group') {
        tds.prop('contenteditable', true);
   }
  } else {
    var isValid = true;
    var errors = '';
    $('#myDialogBox').empty();
    var elements = tds;
    if (tds.find('input').length > 0) {
      elements = tds.find('input');
    }
    var dict = {}; 
    elements.each(function (index, element) {
      var type = $(this).attr('class');
      var value = (element.tagName == 'INPUT') ? $(this).val() : $(this).text();
      console.log(type);
      // ----- Switch statement that provides validation for each table cell -----
      switch (type) {
        case "group_id":
              dict["Group_ID"] = value;
          break;
        case "sku_group":
              dict["SKU Group"] = value;
          break;
      }
    })
    if (isValid) {
        console.log(dict);
      $this.val('Edit');
      tds.prop('contenteditable', false);
      var request = $.ajax({
          type: "POST",
          url: "update.php",
          data: dict
        });

        request.done(function (response, textStatus, jqXHR){
          if(JSON.parse(response) == true){
            console.log("row updated");
          } else {
            console.log("row failed to updated");
            console.log(response);
            console.log(textStatus);
            console.log(jqXHR);
          }
        });

        // Callback handler that will be called on failure
        request.fail(function (jqXHR, textStatus, errorThrown){
            // Log the error to the console
            console.log(textStatus);
            console.log(jqXHR);
            console.error(
                "The following error occurred: "+
                textStatus, errorThrown
            );
        });

        // Callback handler that will be called regardless
        // if the request failed or succeeded
        request.always(function () {

        });
    } else {
      alert(errors);
    }
  }
});

Update.php脚本：

<?php

  $SKU = $_POST['SKU Group'];
  $Group_ID = $_POST['Group_ID'];

  $host="xxxxxxxxxx"; 
  $dbName="xxxxx"; 
  $dbUser="xxxxxxxxxxxxxx"; 
  $dbPass="xxxxxxxxxxxx";

  $pdo = new PDO("sqlsrv:server=".$host.";Database=".$dbName, $dbUser, $dbPass);

  $sql = "UPDATE SKU_Group_Dim SET [SKU Group] = '$SKU' WHERE Group_ID = '$Group_ID'";

  $stmt = $pdo->prepare($sql);
  //$stmt->bindValue('[:SKU Group]', $SKU);
  //$stmt->bindValue(':Group_ID', $Group_ID)  
  $result = $stmt->execute();
  echo json_encode($result);
  if(!$result) {
      echo json_encode(sqlsrv_errors());
  }

?>

Answer 1

你放了：

brew install ffmpeg
brew uninstall opencv3
brew install opencv3 --with-ffmpeg -v

然后你把：
<input type="button" class="delete" ...
然后你循环通过＆＃39;元素＆＃39;并把：
elements = tds.find('input');

这解释了您的切换案例中包含var type = $(this).attr('class');的原因。

Answer 2

我不确定我是否会完全遵循，但我认为这就是正在发生的事情：

鉴于上面这组HTML

<td class="sku_group" id="sku_group-<?php echo intval ($rows['SKU Group'])?>"><?php echo $rows['SKU Group']?></td>
<td class="group_id" align="center" id="group_id-<?php echo intval ($rows['Group_ID'])?>"><?php echo $rows['Group_ID']?></td>
<td><input type="button" class="edit" name="edit" value="Edit"></td>
<td><input type="button" class="delete" value="Delete" onclick="deleteRow(this)"></td>

然后你的选择器会得到所有不是.edit

的td

var tds = $this.closest('tr').find('td').filter(function () {
  return $(this).find('.edit').length === 0;
});

应该返回这些td的

<td class="sku_group" id="sku_group-<?php echo intval ($rows['SKU Group'])?>"><?php echo $rows['SKU Group']?></td>
<td class="group_id" align="center" id="group_id-<?php echo intval ($rows['Group_ID'])?>"><?php echo $rows['Group_ID']?></td>
<td><input type="button" class="delete" value="Delete" onclick="deleteRow(this)"></td>

然后这部分

var elements = tds;

正确地使元素具有以上所有td的

但接下来：

if (tds.find('input').length > 0) {
  elements = tds.find('input');
}

在其中一个中查找输入并将元素设置为输入字段

<input type="button" class="delete" value="Delete" onclick="deleteRow(this)">

所以，当你在每个人的时候，我认为你只有一个要素循环，输入本身。

在前往each（）之前尝试console.log(elements)以确切了解您正在循环播放的内容。

...格式化后我发现你已经得到了答案：P哦好

编辑HTML表行并更新到数据库

2 个答案: