[英]Use JQuery To Add Row To Table On Button Click
我正在使用下面的C#生成表。 我需要一種添加按鈕(在html表末尾的單獨行中)的方法,該按鈕在按下時將添加新的文本框行。
如何在JQuery / JavaScript中實現?
protected void btnGreen_Click(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder(string.Empty);
sb.Append("<table>");
sb.Append("<tr>");
sb.Append("<th>Spl</th>");
foreach (System.Web.UI.WebControls.ListItem item in cbxTest.Items)
{
if (item.Selected) { sb.Append("<th>" + columnname + "</th>"); }
}
sb.Append("</tr>");
int z = 2;
sb.Append("<td><input type=\"text\" name=\"field1\"></td>");
foreach (System.Web.UI.WebControls.ListItem item in cbxTest.Items)
{
if(item.Selected) { sb.Append("<td><input type=\"text\" name=\"field " + z + "\"></td>"); }
z = z + 1;
}
sb.Append("</tr>");
sb.Append("</table>");
other.InnerHtml = sb.ToString();
}
我建議這個
protected void btnGreen_Click(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder(string.Empty);
sb.Append("<table id=\"tab\">");
sb.Append("<thead>");
sb.Append("<tr>");
sb.Append("<th>Spl</th>");
foreach (System.Web.UI.WebControls.ListItem item in cbxTest.Items)
{
if (item.Selected) { sb.Append("<th>" + columnname + "</th>"); }
}
sb.Append("</tr>");
sb.Append("</thead>");
sb.Append("<tbody>");
sb.Append("<tr>");
int z = 2;
sb.Append("<td><input type=\"text\" name=\"field1\"></td>");
foreach (System.Web.UI.WebControls.ListItem item in cbxTest.Items)
{
if(item.Selected) { sb.Append("<td><input type=\"text\" name=\"field " + z + "\"></td>"); }
z = z + 1;
}
sb.Append("</tr>");
sb.Append("</tbody>");
sb.Append("<tfoot>");
sb.Append("<tr><td><button id=\"add\" type=\"button\">Add</button></td></tr>");
sb.Append("</tfoot>");
sb.Append("</table>");
other.InnerHtml = sb.ToString();
}
jQuery的:
$(function() {
$("#add").on("click",function() {
var $row = $("#tab tbody tr").first().clone();
$row.find("input").val(""); // here you can also change names if needed
$("#tab tbody").append($row);
});
});
例:
$(function() { $("#add").on("click", function() { var $row = $("#tab tbody tr").first().clone(); $row.find("input").val(""); // here you can also change names if needed $("#tab tbody").append($row); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <table id="tab"> <thead> <tr> <th>Spl</th> <th>columnname1</th> <th>columnname2</th> <th>columnname3</th> </tr> </thead> <tbody> <tr> <td><input type="text" name="field1"></td> <td><input type="text" name="field 2"></td> <td><input type="text" name="field 3"></td> <td><input type="text" name="field 4"></td> </tr> </tbody> <tfoot> <tr> <td><button id="add" type="button">Add</button></td> </tr> </tfoot> </table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.