jq动态操作表对象
<table id="attachTable" border="0" width="80%"> 这是要操作的表对象
<tr>
<td width="45%" bgcolor="#CCCCCC">代买货物类型</td>
<td width="20%" bgcolor="#CCCCCC">总金额数</td>
<td width="15%" bgcolor="#CCCCCC">操作 <input class="add" type="button" onclick="addAttachLine(1);" value="<@s.m "content.attachmentAddLine"/>"/></td>
</tr>
</table>
<textarea id="attachTr" style="display:none"> 这是要往表上增加的行
<tr id="attachTr1{0}"><!-- {0}是占位符 会自动增长 -->
<td align="center">
<@p.select style="width: 45%" onchange="change({0},1)" id="dM{0}" value=commodityFirstClass list=commodityList headerKey="" headerValue="stationWorkPlatform.commodityFirstClass" required="true" />
<select id="dMSecond{0}" name="goodsType" style="width: 50%">
<option value=""><@s.m "stationWorkPlatform.commoditySecondClass"/></option>
</select>
</td> <!-- jQuery Validate 校验多个相同name时,id用来区分他们必须加上 -->
<td width="60px"><@p.text name="goodsAmount" maxlength="15" id="goodsAmount1{0}" class="number"/></td>
<input type="hidden" name="goodsMark" value=0 />
<td align="center"><input class="delete" type="button" onclick="moveTr({0},1);" value="删除"/></td>
</tr>
</textarea>
jq代码：
<script type="text/javascript">
var attachIndex = 2;//定义一个全局变量attachIndex
function addAttachLine(index) {
if(index==1){
var attachTpl = $.format($("#attachTr").val());//格式化之后获取一个函数，参数就是{0}
$('#attachTable').append(attachTpl(attachIndex++));//attachIndex++就是传到{0}里的实参
}else{
var attachTpl = $.format($("#attachTr2").val());
$('#attachTable2').append(attachTpl(attachIndex++));
}
}
//移除行的方法
function moveTr(id,idx){
var tr=$('#attachTr'+idx+id);
tr.remove();//ie浏览器不支持documentGetElementById().remove(),必须使用JQuery来获得对象然后调用remove()
}
function change(i,idx){
//idx用来区分代买(1)代卖(2), i用来决定代买代卖中的行标识
if(idx==1){//代买
var dM = encodeURIComponent($("#dM"+i).val());//获取商品大类的值，是汉字需要编码
if(null!= dM && ""!=dM){
sendAjax(i,dM,idx);
} else{
$("#dMSecond"+i).html("<option value=''>--请选择具体大类--</option>");
}
}else{//代卖
var dL = encodeURIComponent($("#dL"+i).val());
if(null!= dL && ""!=dL){ sendAjax(i,dL,idx);
} else{
$("#dLSecond"+i).html("<option value=''>--请选择具体大类--</option>");
}
}
}
function sendAjax(num,first,idx){//num表示代买代卖中的行标识
var secondClass = ""; if(idx==1){//代买
secondClass = $("#dMSecond"+num).val();//获取页面加载时，具体类别回显的值
}else{//代卖
secondClass = $("#dLSecond"+num).val();//获取页面加载时，具体类别回显的值
}
$.ajax({
type:'post',
url:'getSecondClass.do',
data: {commodityFirstClass:first},
dataType:"json",
async: false,
success: function (myJSON) { //返回json结果
var options="";
if(myJSON.length>0){
options+="<option value=''>--请选择具体大类--</option>";
for(var i=0;i<myJSON.length;i++){
if(secondClass == myJSON[i].commoditySecondClass){//具体类别的回显
if(idx==1){//1是代买
options+="<option selected='selected' value='"+myJSON[i].buyCommid+"'>"+myJSON[i].commoditySecondClass+"</option>";
}else{//2是代卖
options+="<option selected='selected' value='"+myJSON[i].sellCommid+"'>"+myJSON[i].commoditySecondClass+"</option>";
}
}else{
if(idx==1){
options+="<option value='"+myJSON[i].buyCommid+"'>"+myJSON[i].commoditySecondClass+"</option>";
}else{ options+="<option value='"+myJSON[i].sellCommid+"'>"+myJSON[i].commoditySecondClass+"</option>";
}
} }
if(idx==1){
$("#dMSecond"+num).html(options);//直接设置新的html值，不需要清空
}else{
$("#dLSecond"+num).html(options);//直接设置新的html值，不需要清空
}
}
else if(myJSON.length<=0){ alert("操作失败");
}
}
}) }
</script>
