Question

我有一个按钮，打开一个对话框，其中包含以下字段的表单：姓名，年龄和电子邮件。我希望在单击提交按钮时，表单中的数据会在页面上附加html表。

jQuery脚本：

<script>

$(document).ready(function() {
$(function() {
$("#dialog").dialog({
autoOpen: false
});
$("#button").on("click", function() {
$("#dialog").dialog("open");
});
});

$("#submit").click(function(e) {
var email = $("#email").val();
var name = $("#name").val();
var age = $("#age").val();
var ageReg = /^[0-9]{2}$/;
var ageReg1 = /^[0-9]*$/;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if (email === '' || name === '' || age === "")
 {
  alert("Please fill all fields");
  e.preventDefault();
 }
 else if (!(email).match(emailReg)) 
{
 alert("Invalid Email");
 e.preventDefault();
}
else if((!(age).match(ageReg)) || (!(age).match(ageReg1)))
{
 alert("Invalid Age");
 e.preventDefault();

}
else {
 $( "#users tbody" ).append( "<tr>" +
          "<td>" + name.val() + "</td>" +
          "<td>" + email.val() + "</td>" +
          "<td>" + password.val() + "</td>" +
        "</tr>" );
        dialog.dialog( "close" );
}
});
});

CSS代码：

<style>
table{
        border: 1px solid black
        border-collapse: collapse;
        border-spacing: 0;
    width:600px;
    height:100%;
    margin:0px;padding:0px;

}th{
 text-transform : uppercase;
 letter-spacing: 0.1em;
 font-size : 90%;
 border-bottom : 2px solid #111111;
 border-top : 1px solid #111111;
}
tr.hover{
 background-color:gray;
}
.tablemain{
  margin-left: 300px;
    margin-right: 300px;
    margin-top: 50px;

}
.container{
 margin-left: 450px;
    margin-right: 300px;
    margin-top: 5px;

}

HTML code：

<body>
<div class="container">
<div class="main">
<div id="dialog" title="Dialog Form">
<form action="" method="post">
<label>Name:</label>
<input id="name" name="name" type="text">
<label>Email:</label>
<input id="email" name="email" type="text">
<label>Age:</label>
<input id="age" name="age" type="text">
<input id="submit" type="submit" value="Submit">
</form>
</div>
<h2>jQuery Dialog Form Example</h2>
<p>Click below button to see jQuery dialog form.</p>
<input id="button" type="button" value="Open Dialog Form">
</div>
</div>

<div class= "tablemain">

<table id="users">
<thead>
 <tr class="headers">
   <th scope="col">Name</th>
   <th scope="col">Email</th>
   <th scope="col">Age</th>
 </tr>
</thead>
<tbody>
  <tr>
   <td>Aditya</td>
   <td>AAA</td>
   <td>23</td>
  </tr>
</tbody>
</table>
</div>



</body>
</html>

Answer 1

您尝试在需要jQuery对象的函数中追加文本。当您使用追加时，请用$（）包装您附加的内容。

 $( "#users tbody" ).append( $("<tr>" +
          "<td>" + name.val() + "</td>" +
          "<td>" + email.val() + "</td>" +
          "<td>" + password.val() + "</td>" +
        "</tr>" ));
        dialog.dialog( "close" );
}

我不确定所有的换行符和空格 - 你可能不得不摆弄一些，甚至打破这样的构建：

var t = $('<tr />');
t.append($("<td>" + name.val() + "</td>"));

等...

看到第一个错误后，我停止寻找错误。除了在需要对象的地方使用文本之外，还在.val（）函数的字符串上运行.val（），并尝试追加一个不存在的字符串＆＃39;密码＆＃39;而不是年龄领域。您还忽略了在验证后在else块中添加e.preventDefault（），我将它移动到函数的顶部，因为它似乎是无条件的。我也很好奇你说对话框关闭了，因为它给了我一个错误，因为对话框变量没有被定义。

此外，虽然它没有破坏任何东西，但这个结构是多余的（我只会删除$（function（）{}块，它与$（document）.ready（function（）完全相同。 {}）：

$(document).ready(function() {
  $(function() {

完全更正的代码如下：

$(document).ready(function() {

  $("#dialog").dialog({
    autoOpen: false
  });

  $("#button").on("click", function() {

    $("#dialog").dialog("open");

  });

  $("#submit").click(function(e) {

    e.preventDefault();

    var email = $("#email").val();
    var name = $("#name").val();
    var age = $("#age").val();
    var ageReg = /^[0-9]{2}$/;
    var ageReg1 = /^[0-9]*$/;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    if (email === '' || name === '' || age === "") {

      alert("Please fill all fields");

    } else if (!(email).match(emailReg)) {

      alert("Invalid Email");

    } else if((!(age).match(ageReg)) || (!(age).match(ageReg1))) {

      alert("Invalid Age");

    } else {

      $( "#users" ).append( $("<tr>" +
        "<td>" + name + "</td>" +
        "<td>" + email + "</td>" +
        "<td>" + age + "</td>" +
        "</tr>" )
      );

      $("#dialog").dialog( "close" );

    }

  });  

});

如何使用jquery ui将对话框表单中的数据添加到html表中

1 个答案: