不好的做法 - 从 PHP while 循环为 getElementbyID 生成 javascript 代码

Question

我正在通过 PHP 从 mysql 查询创建一个 html 表。我正在用查询结果集中的一条记录填充每个表行。

我使用 javascript 函数 getElementById 显示或关闭对话框。

由于我有很多行，我将 javascript 代码添加到 while 循环/表数据中。 这会创建大量的 javacode，我很确定这是不良做法的一个很好的例子。

如何在不为每一行生成（以编程方式）唯一的 JavaScript 函数的情况下做到这一点？数组是要走的路吗？

这是我的代码

<?php while($r = mysqli_fetch_assoc($result)){  $current_row_number++; ?>
    <tr>
      <td>
    <!--Popup Window-->   
    <dialog id="window<?php echo $current_row_number; ?>">  
    <h3>Description</h3>  
    <p><?php echo $r['description']; ?></p>  
    <button id="exit<?php echo $current_row_number; ?>">Close</button>  
    </dialog>  
    <button id="show<?php echo $current_row_number; ?>">View</button> 
    <!--Popup Window-->   
     <script type="text/javascript">

    var dialog<?php echo $current_row_number; ?> = document.getElementById('window<?php echo $current_row_number; ?>');  
    document.getElementById('show<?php echo $current_row_number; ?>').onclick = function() {  dialog<?php echo $current_row_number; ?>.show();   };  
    document.getElementById('exit<?php echo $current_row_number; ?>').onclick = function() {  dialog<?php echo $current_row_number; ?>.close();  };  

     </script>
     </td>
    </tr>
<?php } ?>

生成此示例输出：

 <script type="text/javascript">

var dialog8 = document.getElementById('window8');  
document.getElementById('show8').onclick = function() {  dialog8.show();   };  
document.getElementById('exit8').onclick = function() {  dialog8.close();  };  
 </script>
 <script type="text/javascript">

var dialog9 = document.getElementById('window9');  
document.getElementById('show9').onclick = function() {  dialog9.show();   };  
document.getElementById('exit9').onclick = function() {  dialog9.close();  };  

 </script>
 <script type="text/javascript">

var dialog10 = document.getElementById('window10');  
document.getElementById('show10').onclick = function() {  dialog10.show();   };  
document.getElementById('exit10').onclick = function() {  dialog10.close();  };  

 </script>

等等……

我不需要一个完整的例子，但如果你能把我推向正确的方向，我会很高兴。我想摆脱那个$current_row_number...

在代码中重复执行任务是不好的做法，java 脚本代码看起来很垃圾

提前谢谢你

Answer 1

是的，确实不需要所有这些。

在事件处理程序中，this 指的是事件处理程序附加到的元素，事件对象的target 属性告诉您事件从哪里开始。您可以使用此信息在表格上设置一个处理程序来处理对这些按钮的点击。在按钮上放置一个类，指示它们应该“显示”还是“隐藏”，然后执行以下操作（参见 cmets）：

document.getElementById("the-table").addEventListener("click", function(e) {
    // Find the row
    var row = e.target;
    while (row.tagName != "TR") {
        if (row === this) {
            // The click wasn't on a row, ignore it
            return;
        }
        row = row.parentNode;
    }

    // Find the button
    var button = e.target;
    while (button.tagName != "BUTTON") {
        if (button === this) {
            // The click wasn't on a button, ignore it
            return;
        }
        button = button.parentNode;
    }

    // Find the dialog
    var dialog = row.querySelector("dialog");
    if (!dialog) {
        // Couldn't find it
        return;
    }

    // Now, use the `className` or `classList` on `button` to determine
    // whether to show or hide, and do that on `dialog`
}, false);

当然，您可以将其中的一些封装在实用函数中（或使用已经拥有的库，如 jQuery）。

这是一个简化的示例，使用h3 代替dialog：

document.getElementById("the-table").addEventListener("click", function(e) {
  // Find the row
  var row = e.target;
  while (row.tagName != "TR") {
    if (row === this) {
      // The click wasn't on a row, ignore it
      return;
    }
    row = row.parentNode;
  }

  // Find the button
  var button = e.target;
  while (button.tagName != "BUTTON") {
    if (button === this) {
      // The click wasn't on a button, ignore it
      return;
    }
    button = button.parentNode;
  }

  // Find the "dialog"
  var dialog = row.querySelector("h3");
  if (!dialog) {
    // Couldn't find it
    return;
  }

  // Now, use the `className` or `classList` on `button` to determine
  // whether to show or hide, and do that on `dialog`
  if (button.className == "show") {
    dialog.className = "";
  } else {
    dialog.className = "hidden";
  }
}, false);

.hidden {
  display: none;
}

<table id="the-table">
  <tbody>
    <tr>
      <td>
        <h3 class="hidden">Dialog 1</h3>
        <div>
          <button class="show">Show 1</button>
          <button class="hide">Hide 1</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <h3 class="hidden">Dialog 2</h3>
        <div>
          <button class="show">Show 2</button>
          <button class="hide">Hide 2</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <h3 class="hidden">Dialog 3</h3>
        <div>
          <button class="show">Show 3</button>
          <button class="hide">Hide 3</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <h3 class="hidden">Dialog 4</h3>
        <div>
          <button class="show">Show 4</button>
          <button class="hide">Hide 4</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>