如何使用JQuery在Html中添加动态表 [英] How To Add Dynamically Table in Html Using JQuery
本文介绍了如何使用JQuery在Html中添加动态表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Hello Everyone！
i是JQuery的新手，我正在尝试动态添加表格到Html。当用户点击Add Button然后Jquery自动添加5列如果有任何解决方案，请帮助我。
Hello Everyone!
i am new in JQuery and i am trying to add dynamically table in to Html .when user click on Add Button then Jquery Automatically add 5 Column into the Row of Table .Please help me if any have Solution of this.
<!Doctype HTML>
<html>
<head>
<title>Adding Table</title>
<style type="text/css">
table
{
caption-side: bottom;
display:block;
}
</style>
</head>
<body>
<h1>Adding Dynamic Tabel</h1>
<!--<form method="Get" id="MyForm" action="#">-->
<table border="1px">
<caption>Student Management Table</caption>
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Age</th>
<th>Male</th>
<th>Female</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<input type="submit" value="Add" id="Add">
</body>
<script src="jquery.js"></script>
<script type="text/javascript">
//First Decide Form Type
//$("form").submit(function(e)
//{
// e.preventDefault();
//Get Value form The Specific ID
$("#Add").click(function()
{
//var ADD=$("#AddColumn").val();
var Table_Row=$("<tr></tr>");
//now Add Column into the Table
for(var x=0;x<5;x++)
{
$(Table_Row[x]).append(
"<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
"
);
}
});
//});
</script>
</html>
推荐答案
（form）。submit（function（e）
// {
// e.preventDefault（）;
//获取值表格特定ID
("form").submit(function(e) //{ // e.preventDefault(); //Get Value form The Specific ID
（＃Add）。click（function（）
{
// var ADD =
("#Add").click(function() { //var ADD=
（＃AddColumn）。val（）;
var Table_Row =
("#AddColumn").val(); var Table_Row=
这篇关于如何使用JQuery在Html中添加动态表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
