tr 上下移动
2014-05-16 09:20
288 查看
<%@ 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)" onclick="moveUp(this);">上移</a> | <a href="javascript:void(0)" onclick="moveDown(this);">下移</a> | <a href="javascript:void(0)"
onclick="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)" onclick="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)" onclick="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)" onclick="moveUp(this);">上移</a> |
<a href="javascript:void(0)" onclick="moveDown(this);">下移</a> |
<a href="javascript:void(0)" onclick="DeleteSignRow('tr_t<s:property value="#index.index"/>');">删除</a>
</td>
</tr>
</s:iterator>
</table>
<div class="btnbarBig">
<a href="javascript:void(0)" class="btnG" onclick="check()">确定</a>
<a href="javascript:void(0)" class="btnO" onclick="window.history.back();">返回</a>
</div>
</form>
</dd>
</dl>
</div>
</body>
</html>
<script>
document.getElementById('txtTRLastIndex').value = index;
forbidMove();
</script>
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)" onclick="moveUp(this);">上移</a> | <a href="javascript:void(0)" onclick="moveDown(this);">下移</a> | <a href="javascript:void(0)"
onclick="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)" onclick="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)" onclick="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)" onclick="moveUp(this);">上移</a> |
<a href="javascript:void(0)" onclick="moveDown(this);">下移</a> |
<a href="javascript:void(0)" onclick="DeleteSignRow('tr_t<s:property value="#index.index"/>');">删除</a>
</td>
</tr>
</s:iterator>
</table>
<div class="btnbarBig">
<a href="javascript:void(0)" class="btnG" onclick="check()">确定</a>
<a href="javascript:void(0)" class="btnO" onclick="window.history.back();">返回</a>
</div>
</form>
</dd>
</dl>
</div>
</body>
</html>
<script>
document.getElementById('txtTRLastIndex').value = index;
forbidMove();
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- table的数据行tr上下移动
- jquery实现tr元素的上下移动示例代码
- jquery实现tr元素的上下移动示例代码
- jquery实现tr元素的上下移动
- table的数据行tr上下移动
- jquery 控制table tr 上下移动
- js 上下键控制table里tr的背景上下移动选中效果
- html table tr td 上下移动行实例源代码
- jquery实现tr元素的上下移动示例代码
- jQuery实现table中的tr上下移动并保持序号不变
- Table中对tr的上下拖拽移动
- jQuery实现table中的tr上下移动并保持序号不变的实例代码
- js实现小方块上下左右移动
- java中image显示图片，随上下左右键移动
- EasyUI-datagrid-行上下移动
- Eclipse4.7基础 快捷键 alt + 上下箭头 实现选中语句的上下移动
- 移动cxTreeList节点的方法(上下移动)
- listbox多选实现上下移动 js版和服务器版
- Jquery实现Div上下移动示例
- 点击上下移动