How to add a new row to existing table in HTML

Question

Here is my ASP code to display a database table in the form of HTML table

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>");
}

Here's my insert code:

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();
}

It's working perfectly. But I don't want to read whole table again when I perform insert operation. I just want to append the row to HTML table which is defined in display method when cmd.ExecuteNonQuery returns 1 (To make sure that the database table got updated). How?

Answer 1

in your ajax succeess callback append new row to table

succcess:function(data)
{
    var newRow= "";                   
    newRow= newRow+ "<tr>";
    newRow= newRow+ "<td>" + studentId + "</td>";
    newRow= newRow+ "<td>" + studentName + "</td>";      
    newRow= newRow+ "</tr>";                        
    $('.yourtable').append(newRow);
}

Answer 2

Create HTML table as server side control using runat='server'. So your table creation part will be as below;

**Response.Write("<Table runat='server' id='tblStudents' cellpadding = 5>");**

After Saving, you can access this control from code behind and add rows. Add below code after successful insertion;

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);

Answer 3

I would suggest this way using jquery's append . It will append row after finding last child within the tbody of your table :

$('#yourTableID > tbody:last-child').append('<tr><td>Some Data</td>...</tr>');

Note: Table should have at least one row for this to work which you can easily do by counting the rows within your table using jquery.