Jquery 的clone方法动态增加行,事件问题。

Jquery 的clone方法动态增加行,事件问题。,第1张

jquery clone方法实现动态增加行和删除

//待克隆的div

<div class="serviceList-sel-body">

<div id="serviceId0" name="divName" >

<select id="service_select_id" name="serviceId" class="serviceSelect" style="width: 100px"></select>

<input id="serviceRateId" name="serviceRate" class="serviceRate" onblur="javascript:checkServiceRate(this)"name=""maxlength="5" style="width: 60px"/>%

<input id="divideRateId" name="divideRate" class="divideRate" onblur="javascript:checkDivideRate(this)" name="" maxlength="5" style="width: 60px"/>%

<a href="#" id="delA" onclick="return false" title="删除" class="delRow_Link" ></a>

</div>

js代码//动态添加行

function addRow(service_id,service_rate,divide_rate,flag){

var idNum//计数标识

var row1

row1=$("#serviceId"+(idNum-1))//获得第一行 -----修改(显示) -- 设置jquery对象(待克隆的div)

//如果row1为空

if(row1.length==0){

idNum=1

row1=$("#serviceId"+(idNum-1))

}

var newRow=row1.clone(true)//创建第一行的一个副本

// newRow.insertBefore(row1)//在第一行前插入

newRow.insertAfter(row1)//在第一行后插入

var rndID="serviceId"+idNum

newRow.attr("id",rndID)//设置行ID 每次都不一样

//给各个 select input 加上不同的id

newRow.find("a").attr("id",rndID)

newRow.find("select.serviceSelect").attr("id","serviceSelect"+rndID)

newRow.find("input.serviceRate").attr("id","serviceRate"+rndID)

newRow.find("input.divideRate").attr("id","divideRate"+rndID)

//初始值为空

$("#serviceRate"+rndID).val("")

$("#divideRate"+rndID).val("")

//绑定事件

newRow.find("input.divideRate").blur(function(){

checkDivideRate(this)

})

newRow.find("input.serviceRate").blur(function(){

checkServiceRate(this)

})

//给新增的每一行内的删除加上删除事件

newRow.find("a").click(function(){

delRow(this)

})

// 新加行显示删除按键

newRow.find("a").html(" <span style='color: blue'>删除</span>")

//修改时候用到

if(flag==2){

newRow.find("select.serviceSelect").val(service_id)

newRow.find("input.serviceRate").val(service_rate)

newRow.find("input.divideRate").val(divide_rate)

}

//查看时候用到

if(flag==3){

//alert(service_id+" | "+service_rate+" | "+divide_rate)

newRow.find("select.serviceSelect_view").val(service_id)

newRow.find("input.serviceRate_view").val(service_rate)

newRow.find("input.divideRate_view").val(divide_rate)

}

//显示克隆出的新行数据

newRow.show()

idNum++//克隆一次加一次

}

//动态删除行

function delRow(who) {

$("#" + who.id).remove()

}

你可以在《物证材料信息的表格》外面套一个div,获取这个div的innerHTML,加入到下面即可;

只设置name,不要加id了;后台通过name获取数组。

后台循环数组添加即可

一个比较笨的方法也是最简单的就是判断选择的值 然后去创建表格比如获取到的值是num

var table="<table>"

for(var i=0i<numi++)

{

table+=“<tr><td></td><td></td></tr>”

}

document.GetElementById("要创建表格的容器ID").InnerHTML=table

这样就可以了

方法二:

这个方法需要你在页面上先定要表格

function aa(num)//这个是你选择的时候调用的js事件 num为行数

{

for(var i=0i<numi++)//判断调用创建表格中行的次数

{

CreatTableRows()

}

}

function CreatTableRows(){

var obj = document.getElementById("表格ID")

var hangshu = obj.rows.length//获取表格现有的行数

var orow = obj.insertRow(-1)//在最后一行后面加一行

var ocell = orow.insertCell()// 在行里面增加一列

var neirong = " 列里面的内容1"

ocell.innerHTML = neirong

var ocell = orow.insertCell()// 在行里面增加一列

var neirong = " 列里面的内容2"

ocell.innerHTML = neirong

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11687893.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存