[英]How to add a new row to existing table in HTML
這是我的ASP代碼,以HTML表格的形式顯示數據庫表格
if (operation == "display"){
MySqlDataAdapter da = new MySqlDataAdapter("select StudentId, StudentName from tblStudent where StudentStatus = 'a'", con);
DataTable dt = new DataTable();
da.Fill(dt);
Response.Write("<Table cellpadding = 5>");
Response.Write("<tr>");
Response.Write("<th>");
Response.Write("Student Id");
Response.Write("</th>");
Response.Write("<th>");
Response.Write("Student Name");
Response.Write("</th>");
Response.Write("</tr>");
foreach (DataRow dr in dt.Rows){
Response.Write("<tr>");
Response.Write("<td>");
Response.Write(dr["StudentId"].ToString());
Response.Write("</td>");
Response.Write("<td>");
Response.Write(dr["studentName"].ToString());
Response.Write("</td>");
Response.Write("</tr>");
}
Response.Write("</Table>");
}
這是我的插入代碼:
if (operation == "insert"){
string sid, sname;
sid = Request.QueryString["StudentId"].ToString();
sname = Request.QueryString["StudentName"].ToString();
//MySqlDataAdapter da = new MySqlDataAdapter("insert into tblStudent (StudentId, StudentName) values (sid, sname)", con);
con.Open();
MySqlCommand cmd = con.CreateCommand();
cmd.CommandType = CommandType.Text;
cmd.CommandText = "insert into tblStudent (StudentId, StudentName) values('" + sid.ToString() + "', '" + sname.ToString() + "')";
cmd.ExecuteNonQuery();
con.Close();
}
運行良好。 但是我不想在執行插入操作時再次讀取整個表。 我只想在cmd.ExecuteNonQuery返回1時將行追加到顯示方法中定義的HTML表中(以確保數據庫表已更新)。 怎么樣?
在您的ajax成功回調中將新行追加到表
succcess:function(data)
{
var newRow= "";
newRow= newRow+ "<tr>";
newRow= newRow+ "<td>" + studentId + "</td>";
newRow= newRow+ "<td>" + studentName + "</td>";
newRow= newRow+ "</tr>";
$('.yourtable').append(newRow);
}
使用runat ='server'創建HTML表作為服務器端控件。 因此,您的表創建部分如下所示;
**Response.Write("<Table runat='server' id='tblStudents' cellpadding = 5>");**
保存后,您可以從后面的代碼訪問此控件並添加行。 成功插入后添加以下代碼;
var row= new System.Web.UI.HtmlControls.HtmlTableRow();
var cellSID = new System.Web.UI.HtmlControls.HtmlTableCell();
cellSID.InnerText = sid;
row.Cells.Add(cellSID);
var cellSName = new System.Web.UI.HtmlControls.HtmlTableCell();
cellSID.InnerText = sname;
row.Cells.Add(cellSName);
tblStudents.Rows.Insert(0, row);
我建議使用jquery的append
這種方式。 在table
的tbody
中找到最后一個孩子后,它將追加行:
$('#yourTableID > tbody:last-child').append('<tr><td>Some Data</td>...</tr>');
注意:表格至少應具有row
,您可以使用jquery對表格中的行進行計數,從而輕松地做到這一點。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.