JQUERY动态绘制表格，实现动态添加一行，删除一行

 

HTML部分

   <table style="width: 100%;" id="TABYESTERDAY11"></table>
   <input id="TABYESTERDAY11ADD" class="button white" type="button" value="添加一行" />

 

JS部分

     <script type="text/javascript">
　　　　　　//昨日施工-电力
            var shifttable11 = function () {
                this.tableobj;
　　　　　　　　　　//初始化一张表
                this.init = function (datas, obj) {
                    var strs = [];
                    this.tableobj = obj;
                    var base = this;
                    for (var i = 0; i < datas.length; i++) {
                        strs.push('<tr><td style="width:30px"><a  href=\'#\' style="padding-left:10px"  class="operate_delete"  title="删除" ></a></td>');
                        strs.push('<td><input type="text" class="inputvalue" style="width:99%;"  value="' + (datas[i] || '') + '"/></td>');
                        strs.push('</tr>');
                    }
                    obj.append(strs.join(''));
                    this.refresh(obj);
                    $('#' + obj.attr('id') + 'ADD').on('click', function () {
                        var strs = [];
                        strs.push('<tr><td style="width:30px"><a  href=\'#\' style="padding-left:10px" onclick=" $(this).parent().parent().remove();" class="operate_delete"  title="删除" ></a></td>');
                        strs.push('<td><input class="inputvalue" type="text" style="width:99%;"  value=""/></td>');
                        strs.push('</tr>');
                        obj.append(strs.join(''));
                    });
                };
　　　　　　　　　　//删除一行
                this.refresh = function (obj) {
                    obj.find('td .operate_delete').on('click', function () {
                        $(this).parent().parent().remove();
                    });
                };
　　　　　　　　　　//获取多行数据以@符号分割，存入到数据库一个字段中
                this.getData = function () {
                    var strs = [];
                    if (this.tableobj) {
                        this.tableobj.find('.inputvalue').each(function () {
                            strs.push($(this).val());
                        });
                    }
                    return strs.join('@');
                }
            }
            var shifttableobj11 = new shifttable11();
</script>

 

  
//从数据库中读取数据（以@符号分割的字段）对应显示在多行中
function shift() { 
  $.get("ashx/list.ashx?" + Math.random(),  { Action: "post", act: 'shift', id: id, time: time, type: type },
                    function (data, textStatus) {
                        if (data.length > 0) {
     　　　　　　　　　　　　　　　　var TODAY11 = data[0].TODAY11 ? data[0].TODAY11.toString().split('@') : new Array(5);
                                shifttableobjtoday11.init(TODAY11, $('#TABTODAY11'));  
　　　　　　　　　　　　　　}                      
                    }
                 )

 
//将多行数据提交到数据库
function submitshift() {
                var data = {};      
                data.YESTERDAY11 = shifttableobj11.getData();     
                $.ajax({
                    url: "ashx/list.ashx?act=submitshift&r=" + Math.random(),
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify([data]),
                    dataType: 'json',
                    type: 'POST',
                    success: function (data) {
                        if (data && data.flag) {
                            top.message("友情提示", "操作成功！", "show", "1500");                           
                        }
                        else {
                            top.message_alert("非常抱歉", data.msg, "info");
                        }
                    },
                    error: function (a, b) {
                        top.message_alert("非常抱歉", "操作失败", "info");
                    }
                });
            }

 

效果图