JQery 动态填充数据到table 中

Posted net064

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQery 动态填充数据到table 中相关的知识,希望对你有一定的参考价值。

说明:

1、把数据库中的数据查询出来,填充到前台的table中,注意 从数据查询出来的 属性IsNew="0"(table 行tr的属性)

2、单击“添加”按钮 新添加行追加到table的尾部 属性IsNew="1"(table 行tr的属性)

3、也可以删除新添加的行

一、前端代

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>testPic</title>
    <script src="IndusJS/jquery.min.js"></script>
    <style type="text/css">
        table,tr,td,th
        {
            border:1px solid;
            border-collapse:collapse;
        }
        td,th
        {
            width:30px;
            height:31px;
        }
    </style>    
    <script type="text/javascript">
        var tt1 = 0;
        var myArr = new Array();
        $(function () {       
            getList();
        });
        function setArray()
        {            
         var json = JSON.stringify(myArr);
         $.ajax({
            type: "post",
            url: Home/getArr,
            data: { pid: json },
            dataType: "text",
            traditional: true,//这里设置为true
            success: function (data) {
            }
         });
        }
        function getList() {
            $.ajax({
                type: "post",
                url: Home/getTestDICData,
                data: { pid: 1 },
                dataType: "json",
                success: function (data) {
                    var html = ‘‘;
                    $.each(data, function (index, val) {
                        if (index == "picBase64") {
                            if (val.length > 0) {
                                for (var i = 0; i < val.length; i++) {                                 
                                    html = html + <tr IsNew="0">;
                                    html = html + <td> + val[i].ID + </td>;
                                    html = html + <td> + val[i].valName + </td>;                                 
                                    html = html + </tr>;
                                }                             
                            }
                        }                     
                    });
                    var sstt;
                    sstt = sstt + <tr>;
                    sstt = sstt + <th> 编号 </th>;
                    sstt = sstt + <th> 名称 </th>;
                    sstt = sstt + </tr>;
                    sstt = sstt + html;
                    
                    $(#tr).html(sstt);//通过jquery方式获取table,并把tr,td的html输出到table中
                    testSX();
                    getInt();
                    setArray();
                },
                error: function () {
                    alert("查询失败!");
                }
            });
        }
        function testSX()
            {
                var tt = $("#tr tr");
                var contrTemp = [];
                for (var i = 1; i < tt.length; i++) {
                    contrTemp.push($(tt[i]).attr(IsNew));

                }
                console.log(contrTemp);
            }
        function addRow() {
                tt1++;
                var rowTem = <tr IsNew="1" class="tr_ + tt1 + ">
                    + <td><input type="Text" id="text + tt1 + " /></td>
                    + <td><input type="Text" id="txt + tt1 + "/></td>
                    + <td><a href="#" onclick=delRow( + tt1 + ) >删除</a></td>
                    + </tr>;           
                $("#tr tbody:last").append(rowTem);        
            }
        //删除行
        function delRow(_id) {
                $("#tr .tr_" + _id).hide();               
        }
        //获取新添加行的数值
        function getInt() {
                var k;
                var att = {};//创建一个空的json
                var id, number_, name;//定义四个变量,分别是表格中索要获取的分类id、编号、名称、上传图
                var Array01 = [];//一个空的数组
                var tt = $("#tr tr");
                for (var i = 1; i < tt.length; i++) {
                    if ($(tt[i]).attr(IsNew) == 1)
                    {                   
                        att = {
                            ID:$(tt[i]).find(td).eq(0).text(),//分类id                   
                            valName: $(tt[i]).find(td).eq(1).text()//分类名称
                        };
                        Array01.push(att);//把json数据写入数组
                    }
                }
                myArr = Array01;

            }

    </script>
</head>
<body>
    <form id="form1" runat="server">  
        <table class="table" id="tr" style="text-align: center;"> 
        </table>
         <input type="button" value="添加行" onclick="addRow();" />
    </form>
</body>
</html>

 

 

 

二、后台代码

        public JsonResult getTestDICData()
        {
            picModel model = new picModel();
            subPicMolde k1 = new subPicMolde() { ID=1, valName="值1" };
            subPicMolde k2= new subPicMolde()  { ID = 2, valName = "值2" };
            subPicMolde k3 = new subPicMolde() { ID = 3, valName = "值3" };
            subPicMolde k4 = new subPicMolde() { ID = 4, valName = "值4" };
            List<subPicMolde> myList = new List<subPicMolde>();
            myList.Add(k1);
            myList.Add(k2);
            myList.Add(k3);
            myList.Add(k4);
            model.picBase64 = myList;
           return Json(model,JsonRequestBehavior.DenyGet);
        }

   public JsonResult getArr()
        {
            string ps = Request.Params["pid"].ToString();
            JavaScriptSerializer jsSerializer=new JavaScriptSerializer();
            List<subPicMolde> jd = jsSerializer.Deserialize<List<subPicMolde>>(ps);


        subPicMolde model = new subPicMolde() { ID = 1, valName = "123" };
        return  Json(model,JsonRequestBehavior.DenyGet);
        }

   public class picModel
    {
        public List<subPicMolde> picBase64;
    }

    public class subPicMolde
    {
        public int ID { get; set; }
        public string valName { get; set; }
    }

 

以上是关于JQery 动态填充数据到table 中的主要内容,如果未能解决你的问题,请参考以下文章

如何通过单击适配器类中代码的项目中的删除按钮来删除列表视图中的项目后重新加载片段?

dopar中代码的流程优化

库的简介和分类

Chrome 和 Safari 中代码镜像块的高度不同

vim中代码多行删除

调整 JavaScript 中代码排序的输入