javascript - 将正确的元素传递给 JavaScript

Question

我正在处理一个应该做两件事的页面 -

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

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

这是我的代码片段。

PHP 在 BODY 中 -

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

本着最小变化的精神，您可以这样做:

1. 将您的 id 值更改为类、名称或任何其他允许重复的内容。

2. 将您的 button 的 onclick 更改为如下所示:

   <button onclick='editParam(this)'>
   

   ...这会将那个特定 button 元素传递给 editParam 函数。

3. 然后在 editParam 中，您可以执行如下操作(请参阅代码内注释):

   function editParam(button) {
       var tr, pcode, pdesc, pval;
   
       // Find the row containing these inputs
       tr = button.parentNode;
       while (tr && tr.nodeName.toUpperCase() !== "TR" && tr.nodeName.toUpperCase() !== "BODY") {
           tr = tr.parentNode;
       }
       if (!tr || tr.nodeName.toUpperCase() !== "TR") {
           return; // Something went wrong
       }
   
       // Get the inputs for this row -- in this code, I'm using classes,
       // but just change the CSS selector if you use names instead, for
       // instance `pcode = tr.querySelector("input[name=pcode]");`
       pcode = tr.querySelector(".pcode");
       pdesc = tr.querySelector(".pdesc");
       pval  = tr.querySelector(".pval");
   
       // Use them...
   }