tr 上下移动

最新推荐文章于 2018-08-25 23:35:17 发布

华清545

最新推荐文章于 2018-08-25 23:35:17 发布

阅读量979

点赞数

分类专栏： web 文章标签： tr 表单上下移动

本文链接：https://blog.csdn.net/JackieLiuLixi/article/details/25954541

版权

web 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html;charset=GBK"
pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<%@ include file="../../include/heard.inc"%>
<script type="text/javascript" src="./js/insertTable.js"></script>
</head>
<script type="text/javascript">

$(function(){
});

function check(){
if(jQuery.trim(jQuery("#commOptName").val())==""){
Dialog.alertFocus("选项名称不能为空！", 'themeName');
return false;
}
//选项名称
var optionNames = document.getElementsByName('optionNames');
//排序
var orders = document.getElementsByName('orders');
var optionName = '';
var order = '';
for(var j=0;j < optionNames.length;j++) {
optionName = optionNames[j].value;
order = orders[j].value;
if(jQuery.trim(optionName)=='') {//选项名称为空
Dialog.alertFocus("序号"+(parseInt(j+1))+",选项名称不能为空！");
return false;
}
if(jQuery.trim(order)=='' || isNaN(order)) {//排序为空或不是数字
Dialog.alertFocus("序号"+(parseInt(j+1))+",排序不能为空且必须是数字！");
return false;
}
}
Dialog.confirm('是否确定此操作？',function(){
document.form1.submit();
});
}
</script>
<script type="text/javascript">
//添加一个行
//得到tr行数
var rn = '<s:property value="queryCommonOptionList.size"/>';
var index = 0;
if(parseInt(rn)>0) index = parseInt(rn);
else rn = 1;
var tableId = "listTab_t";
function AddNewRow() {
deleteForbidMove();
var txtTRLastIndex = findObj("txtTRLastIndex", document);
var rowID = parseInt(txtTRLastIndex.value);

var tab = findObj(tableId, document);
var columnLength = tab.rows[0].cells.length;

// 添加行
var newTR = tab.insertRow(tab.rows.length);
newTR.id = 'tr_t'+rowID;
var trId = 'tr_t'+rowID;

for ( var i = 0; i < columnLength; i++) {
if (i == 0) {// 第一列:序号
newTR.insertCell(0).innerHTML = ++index;
} else if(i == 1) {//pledgeIds class="txtR"
newTR.insertCell(i).innerHTML = '<input id="optionNames" name="optionNames" class="ipt" value=""/><font color=red> *</font>';
}else if(i == 2) {
newTR.insertCell(i).innerHTML = '<input size="6" id="orders" name="orders" readonly="readonly" class="ipt" value="'+index+'"/>';
} else {
newTR.insertCell(i).innerHTML = '   <a href="javascript:void(0)" οnclick="moveUp(this);">上移</a> | <a href="javascript:void(0)" οnclick="moveDown(this);">下移</a> | <a href="javascript:void(0)" οnclick="DeleteSignRow(\''+trId+'\');">删除</a>';
}
}

// 将行号推进下一行
txtTRLastIndex.value = (rowID + 1).toString();

forbidMove();
}

//删除指定行
function DeleteSignRow(rowid) {
Dialog.confirm('是否确定删除？',function(){
deleteForbidMove();
var tab = findObj(tableId, document);
var signItem = findObj(rowid, document);
// 获取将要删除的行的Index
var rowIndex = signItem.rowIndex;
// 删除指定Index的行
tab.deleteRow(rowIndex);
// 重新排列序号，如果没有序号，这一步省略

var trNum = $("#listTab_t tr").length - 2;
for (i = 1; i < trNum; i++) {
tab.rows[i].cells[0].innerHTML = i;
tab.rows[i].cells[2].innerHTML = '<input size="6" id="orders" name="orders" readonly="readonly" class="ipt" value="'+i+'"/>';
}
--index;
document.getElementById('txtTRLastIndex').value = index;

forbidMove();
});
}

// TR 上移
function moveUp(obj) {
var objParentTR = $(obj).parent().parent();
var prevTR = objParentTR.prev();

var firstTR = $("#captionTr");
if (prevTR.length > 0 && prevTR[0] != firstTR[0]) {
deleteForbidMove();
var upIndex = objParentTR.children()[0].innerHTML;
var downIndex = prevTR.children()[0].innerHTML;

objParentTR.children()[0].innerHTML = downIndex;
prevTR.children()[0].innerHTML = upIndex;

var upValue = objParentTR.children()[2].innerHTML;
var downValue = prevTR.children()[2].innerHTML;

objParentTR.children()[2].innerHTML = downValue;
prevTR.children()[2].innerHTML = upValue;

prevTR.insertAfter(objParentTR);

forbidMove();
} else {
return;
}
}

// TR 下移
function moveDown(obj) {
var objParentTR = $(obj).parent().parent();
var nextTR = objParentTR.next();

if (nextTR.length > 0) {
deleteForbidMove();
var upIndex = objParentTR.children()[0].innerHTML;
var downIndex = nextTR.children()[0].innerHTML;

objParentTR.children()[0].innerHTML = downIndex;
nextTR.children()[0].innerHTML = upIndex;

var upValue = objParentTR.children()[2].innerHTML;
var downValue = nextTR.children()[2].innerHTML;

objParentTR.children()[2].innerHTML = downValue;
nextTR.children()[2].innerHTML = upValue;

nextTR.insertBefore(objParentTR);

forbidMove();
} else {
return;
}
}

function forbidMove() {
var firstTRObj = $("#listTab_t tr:eq(1) td:eq(3) a:eq(0)");
firstTRObj.attr("style","color:gray;cursor:text");
firstTRObj.removeAttr("onclick");

var lastTRObj = $("#listTab_t tr:last-child td:eq(3) a:eq(1)");
lastTRObj.attr("style","color:gray;cursor:text");
lastTRObj.removeAttr("onclick");
}

function deleteForbidMove() {
var firstTRObj = $("#listTab_t tr:eq(1) td:eq(3) a:eq(0)");
firstTRObj.removeAttr("style");
firstTRObj[0].setAttribute("onclick","moveUp(this)");
var lastTRObj = $("#listTab_t tr:last-child td:eq(3) a:eq(1)");
lastTRObj.removeAttr("style");
lastTRObj[0].setAttribute("onclick","moveDown(this)");
}

</script>
<body id="mouseRight">
<div class="mainDiv">
<dl class="mtab">
<dt>
<p class="position">
当前位置：<a>问卷管理</a><a>问卷管理</a><s:iterator value="getCurrentPositionThree(pointModuleId)"><a><s:property value="MODULENAME"/></a></s:iterator><a><s:if test="commonOption == null" >新增</s:if><s:else>修改</s:else></a>
</p>
<a class="back" href="javascript:void(0)" οnclick="history.back()">返回</a>
</dt>
<dd>
<dd>
<form name="form1" id="form1" action="addOrUpdateCommonOption.action" method="post">
<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
<input name='txtTDLastIndex' type='hidden' id='txtTDLastIndex' value="4" />
<input type='hidden' id="commOptId" name="commonOption.commOptId" value="<s:property value='commonOption.commOptId'/>"/>
<input type='hidden' id="pointModuleId" name="pointModuleId" value="<s:property value='pointModuleId'/>"/>
<table width="100%" border="0" cellpadding="0" cellspacing="0"class="formTab">
<tr>
<th colspan="4"><p class="title">
<s:if test="queSurveyTheme == null" >新增</s:if><s:else>修改</s:else>
</p>
</th>
</tr>
<tr>
<td width="15%" class="txtR">选项名称：</td>
<td colspan="3">
<input type="text" id="commOptName" name="commonOption.commOptName" value="<s:property value='commonOption.commOptName'/>" class="" />
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="listTab" id="listTab_t">
<caption>
<p class="title">选项列表</p><p class="btnbars"><a href="javascript:void(0)" οnclick="AddNewRow();"><img src="images/ico_btn_plus.gif" />添加</a>
</caption>
<tr id="captionTr">
<td class="datatitle" width="6%">序号</td>
<td class="datatitle">选项名称</td>
<td class="datatitle" width="10%">排序</td>
<td class="datatitle" width="20%">操作</td>
</tr>
<s:iterator value="queryCommonOptionList" status="index">
<tr id='tr_t<s:property value="#index.index"/>'>
<td><s:property value="#index.count"/></td>
<td><input id="optionNames" name="optionNames" class="ipt" value="<s:property value='commOptName'/>"/><font color=red> *</font></td>
<td><input id="orders" name="orders" class="ipt" readonly="readonly" value="<s:property value='sort'/>"/></td>
<td>  
<a href="javascript:void(0)" οnclick="moveUp(this);">上移</a> |
<a href="javascript:void(0)" οnclick="moveDown(this);">下移</a> |
<a href="javascript:void(0)" οnclick="DeleteSignRow('tr_t<s:property value="#index.index"/>');">删除</a>
</td>
</tr>
</s:iterator>
</table>
<div class="btnbarBig">
<a href="javascript:void(0)" class="btnG" οnclick="check()">确定</a>
<a href="javascript:void(0)" class="btnO" οnclick="window.history.back();">返回</a>
</div>
</form>
</dd>
</dl>
</div>
</body>
</html>
<script>
document.getElementById('txtTRLastIndex').value = index;

forbidMove();
</script>

华清545

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tr 上下移动

pageEncoding="GBK"%>$(function(){});function check(){if(jQuery.trim(jQuery("#commOptName").val())==""){Dialog.alertFocus("选项名称不能为空！", 'themeName');return false;}/
复制链接

扫一扫

专栏目录