关于表格动态添加行并处理相关表单元素的一些修改----优化for重用(1)

<style type="text/css">
#tab td a:link {
font-size:12px;
color:#91A728;
text-decoration:none;
}

#tab td a:visited {
font-size:12px;
color:#91A728;
text-decoration:none;

}

#tab td a:hover {
font-size:12px;
color:#FF6600;
text-decoration:none;
}

#tab td a:active {
font-size:12px;
color:#91A728;
text-decoration:none;
}

.newdot {
font-weight:bolder;
font-family:'幼圆';
margin-right:3px;
}

#tab {
border-collapse:collapse;border:none;
}
#tab td {
/*对所有被设置为position:relative的单元格会造成双重边,
所以不应该在td上应该position:relative*/
border: solid #76B0dF 1px;
padding:3px;
}
#thead td {
background-color:#079AE4;
color:#FFFFFF;
}

.blocktip {
display:block;
color:#CCC;
margin-top:10px;
}

#tbtoolbar {
text-align:center;
}

.btnclass{
background-color:#079AE4;
color:#FFF;
border:2px solid #E9E7E7;
}
</style>

<script src='jquery.js'></script>

<script>
$(document).ready(function(){
var tablejquery = '#tab'    //<table>的id设置,方便重用

//设置所有的<tr/>居中
$(tablejquery+" tr").attr("align","center");

//模板
newtrtemp = function(index,refIndex) {
var nextTxtVal = '';
var nextTitleVal = '标题'+Math.floor(Math.random()*(10000000-1000000)+1000000);
var nextSelectVal = '';    //附加值
var inputFtypeCK1 = ' selected="selected"';
var inputFtypeCK2 = '';
var inputFtypeCK3 = '';
var inputFtypeCK4 = '';
var inputFtypeCK5 = '';
var inputFtypeCK6 = '';

var displayText = '';    //没有附加值时提示文本是否显示
var displaySelect = 'none';
var nextDefaultVal = '';//默认值

if(!!refIndex) {    //如果需要引用其它tr的值作为构造的新tr值
var i = refIndex;
//i项的表单值
nextTxtVal = $("#inputFtip"+i).val();
nextTitleVal = $("#inputFtitle"+i).val();
nextSelectVal = $("#inputFselect"+i).val();
inputFtypeCK1 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '文本框'
? '': ' selected=\""+selected+"\"';
inputFtypeCK2 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '文本域'
? '': ' selected=\""+selected+"\"';
inputFtypeCK3 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '下拉框'
? '': ' selected=\""+selected+"\"';
inputFtypeCK4 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '单选框'
? '': ' selected=\""+selected+"\"';
inputFtypeCK5 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '多选框'
? '': ' selected=\""+selected+"\"';
inputFtypeCK6 = $("#inputFtype"+i)[0].options[$("#inputFtype"+i)[0].selectedIndex].value !== '上传框'
? '': ' selected=\""+selected+"\"';

displayText = $('#changeselect'+i)[0].style.display == 'none'
? '' : 'none';
displaySelect = $('#changeselect'+i)[0].style.display == 'none'
? 'none' : '';
nextDefaultVal = $("#inputFdefault"+i).val();
}

var tr =  ""
+"    <tr id="+index+" align='center'>"
+"        <td><input type='checkbox' id='delck_"+index+"' /></td>"
+"        <td nowrap='nowrap'><div class='countnum' style='position:relative'>"+index+"<div class='newdot' id='new_"+index+"' style='color:red; font-size:12px;display:none;position:absolute;top:-8px; right:0px;'>new</div></div></td>"
+"        <td><input type='text' name='inputFtitle"+index+"' value='"+nextTitleVal+"' id='inputFtitle"+index+"'/></td>"
+"        <td><select onchange='changeBH(this,"+index+");' name='inputFtype"+index+"' id='inputFtype"+index+"'><option value='文本框'"+inputFtypeCK1+">文本框</option><option value='文本域'"+inputFtypeCK2+">文本域</option><option value='下拉框'"+inputFtypeCK3+">下拉框</option><option value='单选框'"+inputFtypeCK4+">单选框</option><option value='多选框'"+inputFtypeCK5+">多选框</option><option value='上传框'"+inputFtypeCK6+">上传框</option></select></td>"
+"        <td nowrap='nowrap'><div id='changetext"+index+"' style='display:"+displayText+"'><span style='color:#CCCCCC;font-weight:normal'>暂无</span></div><div id='changeselect"+index+"' style='display:"+displaySelect+"'><input type='text' name='inputFselect"+index+"' value='"+nextSelectVal+"' id='inputFselect"+index+"' size='20'/><span style='color:red;font-weight:normal'>*</span></div></td>"
+"        <td><input type='text' name='inputFdefault"+index+"' value='"+nextDefaultVal+"' id='inputFdefault"+index+"' size='10'/><span style='color:#CCCCCC;font-weight:normal'></span></td>"
+"        <td><input type='text' name='inputFtip"+index+"' value='"+nextTxtVal+"' id='inputFtip"+index+"'/></td>"
+"        <td nowrap='nowrap'><a href=\'#\' onclick=\'deltr("+index+")\'>删除</a>  <a href=\'#\' onclick=\'addnexttr("+index+")\'>下增</a>  <a href=\'#\' onclick=\'addnexttr("+(index-1)+")\'>上增</a></td><td><a href=\'#\' onclick=\'moveup("+index+")\' id='moveup_"+index+"'>向上</a>  <a id='movedown_"+index+"' href=\'#\' onclick=\'moveup("+(index+1)+")\'>向下</a></td>"
+"    </tr>";

return tr;
}

//此行用于模拟服务器提交获取的数据
if(window.location.search!="") {$('#submitform').append('<p>服务器接收到的表单信息为:<br/>'+window.location.search+"</p>");}

//表单提交时的事件
$("#submitbtn").click(function(){
$("#submitform").append('<br/>输入的行数为:'+$("#inputlen").val()+",即inputLen="+$("#inputlen").val()+"<br/>您可以在服务器端通过循环由1到inputLen获取表单数据,比如inputFtitle[inputLen]即为第inputLen个标题输入项     <a href='#' onclick='document.getElementById(\"submitform\").submit();'>查看提交的表单数据</a>");
return false;
});

//全选反选处理
var allchecked = false;
$("#delckall").click(function(){
allchecked = !allchecked;
for(var i=$("#inputlen").val()-0 ;i>=1; i--) {
$("#delck_"+i)[0].checked = (!allchecked) ? false : 'checked';

}
});

//批量删除处理
$("#delbtn").click(function(){
for(var i=$(tablejquery+" tr").length-1 ;i>=1; i--) {
if($("#delck_"+i)[0].checked) {
var delsometr = function(index) {
deltr(index);
}

delsometr(i);    //删除单行
}
}
return false;
});

//用于限制向上向下时的超界问题
var moveupHTML = "<a href=\'#\' onclick=\'moveup($k$)\' id='moveup_$k$'>向上</a>"
var movedownHTML = "<a id='movedown_$k$' href=\'#\' onclick=\'moveup($k+1$)\'>向下</a>"
//设置链接无效,供添加删除等调用
disableHref = function() {
var trlen = $(tablejquery+' tr').length;
$(tablejquery+' tr').each(function(k,v) {
//将所有的样式及限制还原
if(k>0 && k< trlen) {
$('#moveup_'+k).replaceWith(moveupHTML.replace("$k$",k).replace("$k$",k));
$('#movedown_'+k).replaceWith(movedownHTML.replace("$k$",k).replace("$k+1$",(k+1)));
}

//单独设置限定项
if(k==1){
$('#moveup_'+k).replaceWith("<span style='font-weight:lighter;color:#CCC;font-size:12px;' id='moveup_"+k+"'>向上</span>");
}

if(k+1==trlen) {
$('#movedown_'+k).replaceWith("<span style='font-weight:lighter;color:#CCC;font-size:12px;' id='movedown_"+k+"'>向下</span>");
}
});
}

//在尾部新增加一项<tr/>
$("#but").click(function(){
//隐藏new效果
$('.newdot').hide();
var _len = $(tablejquery+" tr").length;
$(tablejquery).append(newtrtemp(_len));

//设置新增项有new效果
$('#new_'+_len).show();

//设置服务器的获取长度
$('#inputlen').val($(tablejquery+" tr").length-1);
//向上及向下的界限处理
disableHref();

return false;
})

// 将第i行的内容设置到第j行.即tr(id=i).replaceWith(tr(id=j))
var MoveTr = function(fromIndex,toIndex,keep) {
var i = fromIndex;
var j = toIndex;
var k = keep //是否保留原先的tr,如果keep=false,则原tr被替换没掉了

//将当前项(包括表单项值等)设置到第j项项
$("tr[id=\'"+(k? j : i)+"\']")
.replaceWith(newtrtemp(j,i));

}

//删除指定索引的<tr/>项
deltr =function(index)
{
var _len = $(tablejquery+" tr").length;

//删除当前行
$("tr[id='"+index+"']").remove();

//new效果检测
var hasnewdotID = 0

//当前删除项的后面部分执行向上替换
for(var i = index+1,j=_len;i<j;i++){
//用于检索并获取之前的new效果项
if(hasnewdotID==0) {
hasnewdotID = $('#new_'+i)[0].style.display != 'none' ? i : 0;
}

//将当前行设置到上一行(当前行不保留)
MoveTr(i,i-1);

}

//如果检索到哪个new效果项,设置到新的项去(新项为减1)
if(hasnewdotID != 0) {
$('#new_'+(hasnewdotID-1)).show();
}

//设置服务器的获取长度
$('#inputlen').val($(tablejquery+" tr").length-1);
//向上及向下的界限处理
disableHref();

return false;
}

//向上移动或向下移动
moveup = function(index) {

var _len = $(tablejquery+" tr").length;

//有disableHref();  向上及向下的界限处理后,此下两行可注释,否则开启
//if(index==1) {alert('第一条无法向上');return false;}
//if(index==_len)  {alert('最后条无法向下');return false;}

//新增一行
$(tablejquery).append("<tr id='"+_len+"' align='center'><td colspan='9'></td></tr>");

//检索之前的new效果
var hasnewdotID = 0
hasnewdotID = $('#new_'+index)[0].style.display != 'none' ? index : 0;
if(hasnewdotID==0) {
hasnewdotID = $('#new_'+(index-1))[0].style.display != 'none' ? (index-1) : 0;
}

//将当前行的内容设置到新增行,保留当前行
MoveTr(index,_len,true);

//将上行的内容设置到当前行,保留上行
MoveTr(index-1,index,true);

//将新增行内容设置到上行内容
MoveTr(_len,index-1,true);

//删除新增行
var tr=$("tr[id=\'"+_len+"\']")[0];
var table=tr.parentNode;
table.removeChild(tr);

//如果检索到哪个new效果项,设置到新的项去
if(hasnewdotID!=0) {
if(hasnewdotID == index) {
$('#new_'+(hasnewdotID-1)).show();
}else{
$('#new_'+index).show();
}
}

//设置服务器的获取长度
$('#inputlen').val($(tablejquery+" tr").length-1);
//向上及向下的界限处理
disableHref();

return false;
}

//下增一行<tr/> 或上增一行
addnexttr =function(index)
{
var _len = $(tablejquery+" tr").length;
$('.newdot').hide();

//新增一行
$(tablejquery).append(newtrtemp(_len));

//循环:从当前索引的 [下行的下行]到 [新增的项],行内容从循环当前项的"上行"获得
for(var i=_len,j=index+2; i>=j;i--)
{
//将上行的内容设置到当前行并保留上行
MoveTr(i-1,i,true);
}

//还原新增行
$("tr[id=\'"+(index+1)+"\']").replaceWith(newtrtemp(index + 1))

//新增行new效果
$('#new_'+(index + 1)).show();

//设置服务器的获取长度
$('#inputlen').val($(tablejquery+" tr").length-1);
//向上及向下的界限处理
disableHref();

return false;
}

//供输入类型选择时显示的处理
changeBH = function(ele,index) {
var v = ele.options[ele.selectedIndex].value ;
if(v == '单选框' || v == '下拉框' || v == '多选框') {
$('#changetext'+index).hide();
$('#changeselect'+index).show();
}else{
$('#changetext'+index).show();
$('#changeselect'+index).hide();
}
}

})

</script>

<!--注意:为了兼容chrome浏览器对动态表格行的表单数据能正常提交到服务器端,<form>标签必须放置在<table>外围-->
<form id="submitform" method="get" target="_blank">
<table id="tab" border="1" width="60%" align="center" style="margin-top:20px" cellspacing="0" cellpadding="0">
<tr id='thead'>
<td nowrap="nowrap" width="40"><input type='checkbox' id='delckall' /></td>
<td nowrap="nowrap" width="80">序号</td>
<td nowrap="nowrap" width="140">标题<span style='color:red;font-weight:normal'>*</span></td>
<td nowrap="nowrap" width="100">类型<span style='color:red;font-weight:normal'>*</span></td>
<td nowrap="nowrap" width="100">附加选值</td>
<td nowrap="nowrap" width="100">默认值</td>
<td nowrap="nowrap" width="140">输入提示</td>
<td nowrap="nowrap" width="140">操作</td>
<td nowrap="nowrap" width="140">排序</td>
</tr>

<!--以下数据可以有,也可以没有,用于后端编辑:也作为行模板使用,如果一开始不需要这些数据,请删除这些行-->
<TR id=1 align=center>
<TD><INPUT id=delck_1 type=checkbox></TD>
<TD noWrap>
<DIV style="POSITION: relative" class=countnum>1
<DIV style="POSITION: absolute; DISPLAY: none; COLOR: red; FONT-SIZE: 12px; RIGHT: 0px; TOP: -8px" id=new_1 class=newdot>new</DIV></DIV></TD>
<TD><INPUT id=inputFtitle1 name=inputFtitle1 value=标题1354043></TD>
<TD><SELECT id=inputFtype1 onchange=changeBH(this,1); name=inputFtype1><OPTION selected value=文本框>文本框</OPTION><OPTION value=文本域>文本域</OPTION><OPTION value=下拉框>下拉框</OPTION><OPTION value=单选框>单选框</OPTION><OPTION value=多选框>多选框</OPTION><OPTION value=上传框>上传框</OPTION></SELECT></TD>
<TD noWrap>
<DIV id=changetext1><SPAN style="COLOR: #cccccc; FONT-WEIGHT: normal">暂无</SPAN></DIV>
<DIV style="DISPLAY: none" id=changeselect1><INPUT id=inputFselect1 name=inputFselect1><SPAN style="COLOR: red; FONT-WEIGHT: normal">*</SPAN></DIV></TD>
<TD><INPUT id=inputFdefault1 name=inputFdefault1 size=10><SPAN style="COLOR: #cccccc; FONT-WEIGHT: normal"></SPAN></TD>
<TD><INPUT id=inputFtip1 name=inputFtip1 value=""></TD>
<TD noWrap><A onclick=deltr(1) href="#">删除</A>  <A onclick=addnexttr(1) href="#">下增</A>  <A onclick=addnexttr(0) href="#">上增</A></TD>
<TD><span style='font-weight:lighter;color:#CCC;font-size:12px;' id='moveup_1'>向上</span>  <span style='font-weight:lighter;color:#CCC;font-size:12px;' id='movedown_1'>向下</span></TD></TR>
<!--end 以下数据可以有,也可以没有,用于后端编辑-->

</table>
<input type="hidden" name="inputlen" value="0" id="inputlen"/>
<div id="tbtoolbar" align="center">
<span class="blocktip">说明：对于附加选值,请用<span style="color:#f80">|</span>号隔开多个值.对于多选框的默认值如果有多个请用<span style="color:#f80">|</span>号隔开</span>
   <input class="btnclass" type="button" id="but" value="增加一个"/>
   <input class="btnclass" type="button" id="submitbtn" value="提交看行数"/>

   <input class="btnclass" type="button" id="delbtn" value="删除选定的行数"/>
</div>
</form>