添加一个打开对话框的按钮

Question

我想获得一些帮助来添加一个打开对话框的按钮。可能很容易做到，但到目前为止我没有设法实现它。

我有以下 javascript 功能：

function extract_results(jsonDataRaw){
    jsonResultSect = jsonDataRaw['result']
    retTable = ""
    retText = "ret text <br/>"
    for( key in jsonResultSect){
        myJ = jsonResultSect[key]

        a = myJ['a']
        b = myJ['b']
        c = myJ['c']
        init = myJ['INIT1'] + myJ['INIT2']
        r = myJ['RUNNING']

        retTable += "<tr><td><td>" + key +  "</td><td>" +a + "</td><td>" + b + "</td><td>" + c + "</td><td>" + init + "</td><td>" + r + "</td></tr>"

    }
    return retTable
}

另外，我有如下表格：

       <div id="contactdiv">
              <form class="form" action="#" id="contact">
                  <img src="images/button_cancel.png" class="img" id="cancel" />
                  <h3>Contact Form</h3>
                  <hr/>
                  <br/>
                  <label>Name: <span>*</span>
                  </label>
                  <br/>
                  <input type="text" id="name" placeholder="Name" />
                  <br/>
                  <br/>
                  <label>Email: <span>*</span>
                  </label>
                  <br/>
                  <input type="text" id="email" placeholder="Email" />
                  <br/>
                  <br/>
                  <label>Contact No: <span>*</span>
                  </label>
                  <br/>
                  <input type="text" id="contactno" placeholder="10 digit Mobile no." />
                  <br/>
                  <br/>
                  <label>Message:</label>
                  <br/>
                  <textarea id="message" placeholder="Message......."></textarea>
                  <br/>
                  <br/>
                  <input type="button" id="send" value="Send" />
                  <input type="button" id="cancel" value="Cancel" />
                  <br/>
              </form>
          </div>

我从以下 link.

中获取了此表格

对于 retTable 的每一行，我想添加一个带有简单按钮的附加列，该按钮将弹出一个具有上述形式的对话框，并将 key 作为参数发送。

不幸的是，我没能在我的代码中结合这个例子。我能够创建一个包含表单的简单弹出窗口 window，但我只想要对话框，并将 key 作为参数发送。

Answer 1

我建议的解决方案会显示一个 div——称为弹出窗口——当然，您可以将其设置为对话样式。已将一个按钮添加到数据对象中每一行的新列中。单击该按钮会显示弹出窗口，并传入密钥索引。希望这足以让你继续前进。我的示例只是按照您的要求传递了密钥，但也许您想要的是值。无论如何，希望这对您有所帮助。

<head>
  <style>
    popup {
      background-color: #eee;
      display: none;
      width: 300px;
      height: 400px;
      margin: 0 auto;
      border-style: solid;
      border-width: 2px;
    }
  </style>
</head>

<body onload="start()">
  <div>
    <table id='table'>

    </table>
  </div>
  <popup id='popup'>
    <div id="contactdiv">
      <form class="form" action="#" id="contact">
        <img src="images/button_cancel.png" class="img" id="cancel" />
        <h3>Contact Form</h3>
        <h3 id='the-key'>Key: </h3>
        <hr/>
        <br/>
        <label>Name: <span>*</span>
        </label>
        <br/>
        <input type="text" id="name" placeholder="Name" />
        <br/>
        <br/>
        <label>Email: <span>*</span>
        </label>
        <br/>
        <input type="text" id="email" placeholder="Email" />
        <br/>
        <br/>
        <label>Contact No: <span>*</span>
        </label>
        <br/>
        <input type="text" id="contactno" placeholder="10 digit Mobile no." />
        <br/>
        <br/>
        <label>Message:</label>
        <br/>
        <textarea id="message" placeholder="Message......."></textarea>
        <br/>
        <br/>
        <input type="button" id="send" value="Send" />
        <input type="button" id="cancel" value="Cancel" />
        <br/>
      </form>
    </div>
  </popup>
</body>

<script>
  function start() {
    var data = {
      'result': [{
        'a': 'a',
        'b': 'b',
        'c': 'c',
        'INIT1': 3,
        'INIT2': 5,
        'RUNNING': 'YES'
      }, {
        'a': 'a',
        'b': 'b',
        'c': 'c',
        'INIT1': 3,
        'INIT2': 5,
        'RUNNING': 'NO'
      }]
    };
    extract_results(data);
  }

  function extract_results(jsonDataRaw) {
    var jsonResultSect = jsonDataRaw['result'];
    var retTable = "";
    var retText = "ret text <br/>";
    for (key in jsonResultSect) {
      var myJ = jsonResultSect[key]

      var a = myJ['a']
      var b = myJ['b']
      var c = myJ['c']
      var init = myJ['INIT1'] + myJ['INIT2']
      var r = myJ['RUNNING']

      table.innerHTML += "<tr><td><td>" + key + "</td><td>" + a + "</td><td>" + b + "</td><td>" + c + "</td><td>" + init + "</td><td>" + r + "</td><td><button onclick='openDialogue(" + key + ")'>Show Key</button></td></tr>"

    }
    return retTable
  }

  function openDialogue(key) {
    document.getElementById('popup').style.display = 'block';
    document.getElementById('the-key').innerHTML = 'Key: ' + key;
  }
</script>

添加一个打开对话框的按钮

Adding a button that open a dialog box

javascript

jquery

dialog