我最近开始学习jQuery,并且在编写脚本方面需要帮助-我正在练习中。
我的HTML代码如下。
在按钮上单击,我想在表中创建行并使用jQuery从文本框中填充值
<html>
<head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script></script>
</head>
<body><br>
First Name<br><input type ="text" id="firstname"></input><br><br>
Employee ID<br><input type="text" id="empid"></input><br><br>
Phone No<br><input type="text" id="phnno"></input><br><br>
<button type="button" id="btnSubmit">Submit</button><br><br><br>
<table id="mytable" border="1" class="tbinput" style="width:30%">
<tr>
<th>Name</th>
<th>EmployeeID</th>
<th>Phone No</th>
</tr>
</table>
</body>
</html>
使用Jquery .append(“ any dom element”)。
例如,我在您的代码中添加了一个代码段
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script>
$(document)
.ready(
function() {
$(document).on("click","#btnSubmit",function(){
$("#mytable").append("<tr><td>"+$("#firstname").val()+"</td><td>"+$("#empid").val()+"</td><td>"+$("#phnno").val()+"</td></tr>");
}
)
});
</script>
</head>
<body><br>
First Name<br><input type ="text" id="firstname"></input><br><br>
Employee ID<br><input type="text" id="empid"></input><br><br>
Phone No<br><input type="text" id="phnno"></input><br><br>
<button type="button" id="btnSubmit">Submit</button><br><br><br>
<table id="mytable" border="1" class="tbinput" style="width:30%">
<tr>
<th>Name</th>
<th>EmployeeID</th>
<th>Phone No</th>
</tr>
</table>
</body>
</html>
$("#mytable").append("<tr><td>"+$("#firstname").val()+"</td><td>"+$("#empid").val()+"</td><td>"+$("#phnno").val()+"</td></tr>");
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句