Utils = { //定义作用越
info : "Made by Ousui",
version : "0.0.0.1"
};
Utils.my = {
tableId : null, //添加tr所在的table
step : null, //在第几个tr后面添加
stepId : null, //记录添加行数的控件ID
html : null, //添加的格式
trNum : null, //从第几个tr后面加
hasDrag : null, //是否可以拖动
config : function(config) {
var obj = new Object(this);
obj.tableId = config.tableId, obj.step = config.step, obj.stepId = config.stepId, obj.trNum = config.trNum, obj.html = config.html
return obj;
},
addTr : function() { //添加行 ? ?
var StartTr = this.trNum - 1;
var newStep = $("#" + this.stepId + "").attr("value"); //每次的行号
var addStep = parseInt(newStep) + 1;
var addHtml = this.html.replace(/step/ig, addStep); //替换所有的step
$("#" + this.tableId + " tr:eq(" + StartTr + ")").after(addHtml);
if (this.hasDrag = true) { //添加拖动
this.drag(addStep);
}
$("#" + this.stepId + "").attr("value", addStep);
},
delTr : function(step) { //step ?当前的行号
$("tr[id=" + step + "]").remove();
},
drag : function(addStep) {
var onmousedown = false; //鼠标是否被按下
var oldlet = "";
var oldtop = "";
$("#" + addStep + "").live({
mouseover : function() { //鼠标移上事件
var $obj = jQuery(this);
$obj.css("color", "red");
$obj.css("cursor", "pointer");
$obj.css("position", "relative");
$obj.addClass("divStyle");
onmousedown = false;
},
mouseout : function() { //鼠标移去事件
var $obj = jQuery(this);
$obj.css("color", "");
$obj.removeClass("divStyle");
onmousedown = false;
},
mousedown : function(e) { //鼠标按下事件
onmousedown = true;
oldlet = e.pageX; //记录原始的
oldtop = e.pageY;
?
},
mouseup : function(e) { //鼠标事件
onmousedown = false;
?
},
mousemove : function(e) {
if (onmousedown) { //鼠标按下同时拖动才能触发
var $obj = jQuery(this);
var X = e.pageX - oldlet;
var Y = e.pageY - oldtop;
$obj.addClass("divStyle");
$obj.css({
"left" : X,
"top" : Y
});
}
}
?
});
}
}
?
var config = Utils.my.config({
tableId : 'table',
step : 0,
hasDrag : true,
trNum : 1,
stepId : 'step',
html : "<tr id=\"step\" onmousedown=\"moysedown(step)\" onmouseover=\"mouseover(step)\" ><td>step</td><td>step</td><td>step</td><td><a href=\"javascript:deltr(step)\" >del</a></td></tr>"
?
});
function addtr() {
?
config.addTr();
?
}
function sort(step) {
config.sortable(step);
?
}
function deltr(newobj) {
?
config.delTr(newobj);
?
}
?
?
//jsp
?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? <head>
? ? <base href="<%=basePath%>">
?
? ? <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> ? ?
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="<%=path %>/jsoop/person.js"> </script>-->
<style type="">
.divStyle{ ?
? ? ? ? ? ?filter:alpha(opacity=70); background:#deebf7; position:absolute;top:2px;left:2px;z-index:5;
? ? ? ? } ?
</style>
<script type="text/javascript" src="<%=path %>/jsoop/jquery-1.6.min.js"> </script>
<script type="text/javascript" src="<%=path %>/jsoop/import.js"> </script>
? </head>
? <script type="text/javascript">
?
?
? </script>
? <body>
? ? <table id="table">
? ? <tr background="red" ?>
? ? <td > 学习</td>
? ? <td>名字</td>
? ? <td>老师</td>
? ? <td>操作</td>
? ? </tr>
?
?
? ? </table>
? ? <table>
? ? <tr>
? ? <td>
? ? <input type="hidden" value="0" id="step" />
? ? <input type="button" value="添加行" onclick="addtr();">
? ? </td>
? ? </tr>
?
? ? </table>
? </body>
</html>
?
?