当前位置: 代码迷 >> JavaScript >> js 打包动态添加行
  详细解决方案

js 打包动态添加行

热度:131   发布时间:2013-01-05 15:20:39.0
js 封装动态添加行

Utils = { //定义作用越

info : "Made by Ousui",

version : "0.0.0.1"

};

Utils.my={

tableId:null, ? ?//添加tr所在的table

step:null, ? ? ? //在第几个tr后面添加

stepId:null, //记录添加行数的控件ID

html:null, ? ? ?//添加的格式

trNum:null, ? ? //从第几个tr后面加

config :function(config){

var obj = new Object(this);

obj.tableId = config.tableId,

obj.step = config.step,

obj.stepId = config.stepId,

obj.trNum = config.trNum,

obj.html = config.html

return obj;

},

addTr:function(){ ? ? //添加行 ? ?

var StartTr = this.trNum-1;

var newStep = $("#"+this.stepId+"").attr("value"); ? //每次的行号

var addStep = parseInt(newStep)+1;

var addHtml = this.html.replace(/step/ig,addStep); ? //替换所有的step

$("#"+this.tableId+" tr:eq("+StartTr+")").after(addHtml);

$("#"+this.stepId+"").attr("value",addStep);

},

delTr:function(step){ ? //step ?当前的行号

$("tr[id="+step+"]").remove();

}

}

?

?

//测试调用

var config = Utils.my.config({

? tableId:'table',

? step:0,

? trNum:1,

? stepId:'step',

? html:"<tr id=\"step\"><td>11</td><td>22</td><td>33</td><td><a href=\"javascript:deltr(step)\" >del</a></td></tr>"

?

? });

?

function addtr(){

?

? config.addTr();

?

? }

?

function deltr(newobj){

config.delTr(newobj);

?

}

?

//jsp页面

?

<table id="table">

? ? <tr>

? ? <td>学习</td>

? ? <td>名字</td>

? ? <td>老师</td>

? ? <td>操作</td>

? ? </tr>

?

?

? ? </table>

? ? <table>

? ? <tr>

? ? <td>

? ? <input type="hidden" value="0" id="step" />

? ? <input type="button" value="添加行" onclick="addtr();">

? ? </td>

? ? </tr>

?

? ? </table>

  相关解决方案