Javascript 如何在表中创建对话框_Javascript_Html

Javascript 如何在表中创建对话框

javascript html

Javascript 如何在表中创建对话框,javascript,html,Javascript,Html,我不懂javascript，但我必须做家庭作业。请帮助我在HTML表格中添加一个对话框！我找到了一些javascript的示例模式，但我不知道如何使这些模式与HTMLtables一起工作这就是我的HTML代码的外观，例如： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icon

我不懂javascript，但我必须做家庭作业。请帮助我在HTML表格中添加一个对话框！我找到了一些javascript的示例模式，但我不知道如何使这些模式与HTMLtables一起工作

这就是我的HTML代码的外观，例如：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
  <script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
</head>

<body>
  <table id="table">
    <tr>
      <td>
        <button id="show-dialog" type="button" class="mdl-button">Show Confirmation Box</button>
        <dialog class="mdl-dialog">
          <h4 class="mdl-dialog__title">Confirm</h4>
          <div class="mdl-dialog__content">
            <p> blah blah blah </p>
          </div>
          <div class="mdl-dialog__actions">
            <button type="button" class="mdl-button">Confirm</button>
            <button type="button" class="mdl-button close">Cancel</button>
          </div>
        </dialog>
      </td>
    </tr>
    <tr>
      <td>
        <button id="show-dialog" type="button" class="mdl-button">Show Confirmation Box</button>
        <dialog class="mdl-dialog">
          <h4 class="mdl-dialog__title">Confirm</h4>
          <div class="mdl-dialog__content">
            <p> blah blah blah  </p>
          </div>
          <div class="mdl-dialog__actions">
            <button type="button" class="mdl-button">Confirm</button>
            <button type="button" class="mdl-button close">Cancel</button>
          </div>
        </dialog>
      </td>
    </tr>
  </table>
</body>
</html>


显示确认框
证实
废话废话
证实
取消
显示确认框
证实
废话废话
证实
取消

这就是我对对话的发现。我有一个想法，使querySelectorAll，然后在一个循环中执行它，但它没有正常工作。我在祈求帮助

<script>
    var dialog = document.querySelector('dialog');
    var showDialogButton = document.querySelector('#show-dialog');
    if (! dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    showDialogButton.addEventListener('click', function() {
      dialog.showModal();
    });
    dialog.querySelector('.close').addEventListener('click', function() {
      dialog.close();
    });
  </script>


var dialog=document.querySelector（'dialog'）；
var showDialogButton=document.querySelector（“#show dialog”）；
如果（！dialog.showmodel）{
dialogPolyfill.registerDialog（对话框）；
}
showDialogButton.addEventListener（'单击'，函数（））{
dialog.showmodel（）；
});
dialog.querySelector（'.close'）.addEventListener（'click'，function（））{
dialog.close（）；
});

您的问题一定是因为这里的选择器<代码>id选择器在整个html中必须是唯一的。如果要访问多个项目，必须使用

class

属性（或自定义数据-*属性）。因此，向按钮添加一个class属性。将代码更改为

html

...
<button id="show-dialog-btn1" type="button" class="mdl-button show-dialog">Show Confirmation Box</button>
...
<button id="show-dialog-btn2" type="button" class="mdl-button show-dialog">Show Confirmation Box</button>
...
<script>
    var dialog = document.querySelector('dialog');
    var showDialogButtons = document.querySelectorAll('.show-dialog');
    if (! dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    for (let i = 0; i< showDialogButtons.length;i++){
      showDialogButtons[i].addEventListener('click', function() {
        dialog.showModal();
      });
    }
    dialog.querySelector('.close').addEventListener('click', function() {
      dialog.close();
    });
  </script>

。。。
显示确认框
...
显示确认框
...
var dialog=document.querySelector（'dialog'）；
var showDialogButtons=document.querySelectorAll（'.show dialog'）；
如果（！dialog.showmodel）{
dialogPolyfill.registerDialog（对话框）；
}
for（设i=0；i


并确保为每个按钮分配不同的id
值。
问题不清楚。是否要在多个按钮上添加showDialog侦听器？@jaysurya抱歉！代码的第二部分对于表中的每一行都应该正确工作！因此，如何将此事件处理程序添加到所有按钮……使用querySelector（“#show dialog”）
将只匹配第一个元素。所以您应该分配类而不是id，并使用getElementsByClassName（'show-dialog'）
。在js中，您需要使用for循环，以便向其各自的按钮单击显示对话框。