Question

我正在开展一个应该做两件事的页面 -

从PHP数据库中获取数据并在HTML表格中逐行显示。
允许在每个表格的最后一栏点击“编辑”按钮时进行逐行编辑。

我不知道如何进行第二步。我意识到创建的每一行都将具有相同'id'的元素，因此getElementById无效，因为它返回它作为匹配找到的第一个元素。可以采取什么方法来解决这个问题？我已经被困了很长一段时间了，我不再确定这个问题是否可行。任何建设性的建议都会受到欢迎。

这是我的代码片段。

BODY中的PHP -

echo "<table id='param-table' align='center' style=' border: 1px solid black;'>";
    echo "<tr style=' border: 1px solid black; padding: 15px'>
          <td style=' border: 1px solid black; padding: 15px;'>Param Code</td>
          <td style=' border: 1px solid black;  padding: 15px;'>Param Desc</td>
          <td style='  padding: 15px; border: 1px solid black;'>Param Val</td>
          <td style='  padding: 15px; border: 1px solid black;'>Edit Param</td><tr>";

    while ($row_users = mysqli_fetch_array($results)) {
        echo "<form onSubmit='return false;' method='POST'>
              <tr style=' border: 1px solid black;  padding: 15px;'>
              <td style=' border: 1px solid black;  padding: 15px;'>"."
                  <input id='pcode' type='text'  maxlength='10' value='".$row_users['ParamCode']."'>"."
              </td>
              <td style=' border: 1px solid black;  padding: 15px;'>"."
                  <input id='pdesc' type='text'  maxlength='50' value='".$row_users['ParamDesc']."'>"."
              </td>
              <td style=' border: 1px solid black;  padding: 15px;'>"."
                  <input id='pval' type='text'  maxlength='20' value='".$row_users['ParamValue']."'>"."
              </td>
              <td style=' border: 1px solid black;  padding: 15px;'>"."
                  <button onclick='editParam(pcode,pdesc,pval)'>Edit Param</button>"." 
              </td>
              </form>
              </tr>";
    }
    echo "</table>";

注意：我试图发布我的页面看起来像是一个更好的视觉概念的图像，但显然我太新了StackOverflow被允许这样做。：/

Answer 1

以极小的变化精神，这就是你所做的：

将id值更改为类，名称或其他允许重复的值。
将button的{{1}}更改为：
```
onclick
```
...会将特定 <button onclick='editParam(this)'>元素传递到button函数。
然后在editParam中，您可以执行以下操作（请参阅代码内注释）：
```
editParam
```

Answer 2

忘记使用ID，虽然你可以动态生成它们并将它们传递给onclick属性，这比它的价值更麻烦。

使用事件的目标来确定点击的内容，然后在DOM中上下导航以找到您要查找的内容。

这里有一个simplified example来向您展示它是如何运作的：

  <table>
    <tr>
      <td>foo
      <td>bar
      <td><button type="button">baz</button>
    <tr>
      <td>foo2
      <td>bar2
      <td><button type="button">baz2</button>
    <tr>
      <td>foo3
      <td>bar3
      <td><button type="button">baz3</button>
    <tr>
      <td>foo4
      <td>bar4
      <td><button type="button">baz4</button>
  </table>

  <script>
    function whatRowAmIIn(event) {
      var target = event.target;
      // Do nothing if something other than a button was clicked
      if (target.tagName.toLowerCase() !== "button") {
        return;
      }
      // Figure out which row the button was in
      var tr = target.parentNode.parentNode;
      // Get the bar td (for the sake of example)
      var bar_td = tr.querySelector('td:nth-child(2)');
      alert(bar_td.firstChild.data); 
    }
    document.querySelector('table').addEventListener('click', whatRowAmIIn);
  </script>

Answer 3

修改PHP代码以获得结束标记＆lt; / form＆gt;在＆lt; / tr＆gt;之后为了便于阅读，我做了一点注意事项

<?php
    echo "<table id='param-table' align='center' style=' border: 1px solid black;'>";
    echo "<tr style=' border: 1px solid black; padding: 15px'><td style=' border: 1px solid black; padding: 15px;'>Param Code</td><td style=' border: 1px solid black;  padding: 15px;'>Param Desc</td><td style='  padding: 15px; border: 1px solid black;'>Param Val</td><td style='  padding: 15px; border: 1px solid black;'>Edit Param</td><tr>";
    while ($row_users = mysqli_fetch_array($results)) {
        echo "<form onSubmit='return false;' method='POST'>
                <tr style=' border: 1px solid black;  padding: 15px;'>
                    <td style=' border: 1px solid black;  padding: 15px;'>".
                        "<input id='pcode_".$row_users['ParamCode']."' type='text'  maxlength='10' value='".$row_users['ParamCode']."'>".
                    "</td>
                    <td style=' border: 1px solid black;  padding: 15px;'>".
                        "<input id='pdesc_".$row_users['ParamCode']."' type='text'  maxlength='50' value='".$row_users['ParamDesc']."'>".
                    "</td>
                    <td style=' border: 1px solid black;  padding: 15px;'>".
                        "<input id='pval_".$row_users['ParamCode']."' type='text'  maxlength='20' value='".$row_users['ParamValue']."'>".
                    "</td>
                    <td style=' border: 1px solid black;  padding: 15px;'>".
                        "<button onclick='editParam(".$row_users['ParamCode'].")'>Edit Param</button>".
                    "</td>
                </tr>
            </form>";
    }
    echo "</table>";
?>

在JS函数上，使用

function editParam(rowParamCode)

rowParamCode将为单击该按钮的行提供ParamCode的值，并使用

获取行的元素

document.getElementById("pcode_" + rowParamCode)
document.getElementById("pdesc_" + rowParamCode)
document.getElementById("pval_" + rowParamCode)

希望这有帮助！

将正确的元素传递给JavaScript

3 个答案: