jquery如何给指定的表格增加行，然后给每行插入数据，而且其中一行能有超链接的。

Posted 2023-03-15

假设表 <table id="table1">
<tr>
<td>姓名</td><td>学号</td><td>超链接</td><>
</tr>
这是从 ashx文件 请求回来 是json对象 msg (是一个datatable类型的) 将msg里面的数据插入到table1 去 其中超链接那列是要能点击就能超链接的。
求个详细的实现功能的代码，好的可以加分
代码 求给注释

datatable如果想转换成JSON类型的数据，是需要处理的。直接用微软提供的javascriptSerializer类直接序列化，会报错。

所以这里需要贴上两个方法，专门用来转换datatable的

#region DataTable转换为JSON
    /// <summary>
    /// DataTable生成JSON
    /// </summary>
    /// <param name="dt"></param>
    /// <returns></returns>
    public static string CreateJSON(DataTable dt)
    
        Dictionary<string, object> dit = new Dictionary<string, object>();
        List<Dictionary<string, string>> list = DateTableConverter(dt);
        if (list != null)
        
            dit[dt.TableName] = DateTableConverter(dt);
            return new JavaScriptSerializer().Serialize(dit);
        
        else
        
            return "";
        
    

    /// <summary>
    /// 将DataTable数据转化为字典类型
    /// </summary>
    /// <param name="dt"></param>
    /// <returns></returns>
    public static List<Dictionary<string, string>> DateTableConverter(DataTable dt)
    
        List<Dictionary<string, string>> list = new List<Dictionary<string, string>>();

        string cloName = string.Empty;

        foreach (DataRow dr in dt.Rows)
        
            Dictionary<string, string> cloumn = new Dictionary<string, string>();

            foreach (DataColumn dc in dt.Columns)
            
                cloName = dc.ColumnName;
                cloumn.Add(cloName, dr[cloName].ToString());
            

            list.Add(cloumn);
        

        return list;
    
    #endregion

    2.调用代码如下

            DataTable table = new DataTable("Table1");
            DataColumn col1 = new DataColumn("ID", typeof(string));
            DataColumn col2 = new DataColumn("Name", typeof(string));
            table.Columns.Add(col1);
            table.Columns.Add(col2);
            DataRow row1 = table.NewRow();
            row1["ID"] = "1";
            row1["Name"] = "a";
            table.Rows.Add(row1);
            DataRow row2 = table.NewRow();
            row2["ID"] = "2";
            row2["Name"] = "b";
            table.Rows.Add(row2);

            string json = CreateJSON(table);

    3.json结果如下

"Table1":["ID":"1","Name":"a","ID":"2","Name":"b"]

    4.数组中每一个元素，都是一行数据。只要循环遍历，然后将结果添加入你已经创建好的table中就可以了。还有疑问，继续追问吧。我先去吃饭了。

追问

谢谢你跟我解释了 这个datatable跟json的关系，现在问题是，好像我的问题，你还没答到，我其实现在不懂的是，怎么在JS里面用jquery动态给表添加数据，这个遍历应该怎么遍历，我不懂呢。如何把值读取然后赋给table？ 你在跟我写一下吧

追答<script type="text/javascript">
    function bindTable() 
            $.ajax(
                complete: function (xhr, status) 
                    xhr = null;
                ,
                success: function (data) 
                    if (data.length > 0) 
                        var html="";
                        data = eval("(" + data + ")");
                        //整理数据
                        for(var i=0;i<data.Table1.length;i++)
                            html+="<tr><td>"+data.Table1[i].ID+"</td>";
                            html+="<td>"+data.Table1[i].Name+"</td>";
                            html+="<td><a href='"+data.Table[i].Href+"'>链接</a></td></tr>";
                        
                        //添加到table中
                        //字数限制，注释不可写得太多。
                        $("#table1 tr:gt(0)").empty().append(html);
                    
                
            );
        
</script>

追问

按照你的做了，貌似页面不显示，不懂是什么原因，那个又不抱错，能加企鹅么
4
6
0
470 591

追答

按照我写的，页面什么东西都没有显示吗？你有没有调试，看看你的请求有没有成功啊。

追问

调试 那个JS的根本调试不到啊，不懂怎么调试，没装谷歌 路径也没错，断点那个ashx文件，进不去

追答

我给你JS，没有URL，没有DATA，你把这两个参数加上去。看看能不能进你的ASHX文件啊。如果不能，那就是你路径写得不对啊。必须要能进去，读取你要的数据，再返回到页面，才能用success里面的函数拼接HTML代码啊

参考技术A $("#table1").append("<tr><td>"+msg.对象.属性+"</td><td>+"msg.对象.属性"+</td><td><a href=''>+"msg.对象.属性"</a></td></tr>");