首页 新闻 赞助 找找看

JS为对象绑定鼠标事件

0
悬赏园豆:40 [待解决问题]

/

var rowStart = 0; //鼠标按下时行位置
var rowEnd = 0; //鼠标松开时行位置
var colStart = 0; //鼠标按下时列位置
var colEnd = 0; //鼠标松开时列位置
var colorFlag = 0; //输入框颜色 点击后才产生颜色
var defaultColor = "#008B00"; //鼠标滑过时更改的颜色
var initColor = "#FFFF00"; //初始颜色
var name = "";

var priceNum = 0;
var price = 1.5; //每个框初始值
//获取起始位置
function recordStartLocation(node){
var td = $(node);
rowStart = td.attr('rownum');
colStart = td.attr('flag');
colorFlag = 1;
changeColor(node);
}
//获取结束位置
function recordEndLocation(node){
var td = $(node);
colorFlag = 0;
popUpLayer();
}
//鼠标滑过改变颜色
function mouseAfter(node){
if(colorFlag != 1){
return ;
}

var tds=$("td[ccf=1]");
for(var i=0;i<tds.length;i++)
{
var td=tds[i];
td.style.background=initColor;
$(td).attr("ccf",0);
}

var td = $(node);
rowEnd = td.attr('rownum');
var rowStartTemp = parseInt(rowStart);
rowEnd = parseInt(rowEnd);
if(rowStartTemp > rowEnd){
var temp = rowStartTemp;
rowStartTemp = rowEnd;
rowEnd = temp;
}

colEnd = td.attr('flag');
var colStartTemp = parseInt(colStart);
colEnd = parseInt(colEnd);
if(colStartTemp > colEnd){
var temp = colStartTemp;
colStartTemp = colEnd;
colEnd = temp;
}
for(var i=rowStartTemp;i<=rowEnd;i++){
var name = getDateNameEnglish(i);
for(var j=colStartTemp;j<=colEnd;j++){
var tdNode = $("#"+name+j);
changeColor(tdNode[0]);
}
}

}
//显示颜色
function changeColor(node){
if(colorFlag == 1){
node.style.background = defaultColor;
$(node).attr("ccf",1); //标记为选中
}
}
//弹出文本层
function popUpLayer(){
$("#price").val("");
//显示隐藏div
$("#hdiv").show();
//文本框得到焦点
$("#price").focus();
//得到所有可选的td
var tds=$("td[ccf=0]");
//循环
for(var i=0;i<tds.length;i++)
{
var td=tds[i];
//取消td绑定mousedown事件
$(td).unbind("mousedown");
}
}
//关闭文本层
function closeLayer(){
$("#hdiv").hide();
var rido = $("input[name='disableTag']:checked").val(); //选择禁用的情况
if(rido == 0){
$("#price").val(-1);
setValueAndChangeColor();
$("input[name='disableTag']:checked").attr('checked',false);
return ;
}
var num = $("#price").val();
if(!num){ //没有输入金额的情况
clearColor();
return ;
}
var type="^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$";
var re =new RegExp(type);
if(num.match(re)==null) { //输入不为数字的情况
return;
}
setValueAndChangeColor();
//得到所有可选的td
var tds=$("td[ccf=0]");
//循环
for(var i=0;i<tds.length;i++)
{
var td=tds[i];
//为td绑定mousedown事件
$(td).bind("mousedown",recordStartLocation(td));
}
}
//取消文本层
function cancelLayer(){
$("#hdiv").hide();
//取消禁用的选中
$("input[name='disableTag']:checked").attr('checked',false);
clearColor();
//设置所有ccf值为1的值为0
var ts=$("td[ccf=1]");
for(var i=0;i<ts.length;i++)
{
var t=ts[i];
$(t).attr("ccf",0);
}
//得到所有可选的td
var tds=$("td[ccf=0]");
//循环
for(var i=0;i<tds.length;i++)
{
var td=tds[i];
//为td绑定mousedown事件
$(td).bind("mousedown",recordStartLocation(td));
}
}
//输入金额后执行的操作 ---------------------------------------------------------------------------------
function setValueAndChangeColor(){
var price = $("#price").val();
//设置价格
var tds = $("td[ccf=1]");
for(var i=0;i<tds.length;i++){
var td = tds[i];
td.style.background = '#FFFFFF';
var name = $(td).attr("id");
$(td).attr("ccf",0);
var span = $("#"+name+" span");
span.attr("style","color:red;");
span.html(price);
}
}
function clearColor(){
var tds = $("td[ccf=1]");
for(var i=0;i<tds.length;i++){
var td = tds[i];
td.style.background = initColor;
}

}
//将表格拼接成字符串
function getJointStr(name){
var str = "";
for(var i=0 ;i<=167 ;i++){
var value = $("#"+name+i).html();
if(!(" "==value)){
str+=value+"\u0020";
}else{
str+="-1\u0020";
}
}
return str;
}
/**************************************************生成table**************************************************************/
//生成table
function createTable(divNode,tableName,list){
//判断传过来的值是否为空
if(list.length-1>0)
{
//定义七个数组
var num1=[];
var num2=[];
var num3=[];
var num4=[];
var num5=[];
var num6=[];
var num7=[];
for(var i=0;i<=list.length-1;i++)
{
//判断
if((i+1)/24<=1)
{
num1.push(list[i]);
}
//判断
else if((i+1)/24<=2)
{
num2.push(list[i]);
}
//判断
else if((i+1)/24<=3)
{
num3.push(list[i]);
}
//判断
else if((i+1)/24<=4)
{
num4.push(list[i]);
}
//判断
else if((i+1)/24<=5)
{
num5.push(list[i]);
}
//判断
else if((i+1)/24<=6)
{
num6.push(list[i]);
}
//判断
else if((i+1)/24<=7)
{
num7.push(list[i]);
}
}
}
var table = $('<table style=\"background-color:'+initColor+';\">',{'id':tableName,'border':'1px'});
var str = createHeadTr();
for(var i=1;i<=7;i++){
var nameEnglish = getDateNameEnglish(i);
var nameChinese = getDateNameChinese(i);
//判断
if(list.length-1>0)
{
switch(i)
{
case 1:
str += createTr(nameEnglish,nameChinese,divNode,i,num1);
break;
case 2:
str += createTr(nameEnglish,nameChinese,divNode,i,num2);
break;
case 3:
str += createTr(nameEnglish,nameChinese,divNode,i,num3);
break;
case 4:
str += createTr(nameEnglish,nameChinese,divNode,i,num4);
break;
case 5:
str += createTr(nameEnglish,nameChinese,divNode,i,num5);
break;
case 6:
str += createTr(nameEnglish,nameChinese,divNode,i,num6);
break;
default:
str += createTr(nameEnglish,nameChinese,divNode,i,num7);
}
}
else
{
str += createTr(nameEnglish,nameChinese,divNode,i,list);
}
}
table.html(str);
divNode.append(table);;
priceNum = 0;
//得到所有可选的td
var tds=$("td[name=nameEnglish]");
//循环
for(var i=0;i<tds.length;i++)
{
var td=tds[i];
//设置td的ccf值为0
$(td).attr("ccf",0);
//为td绑定mousedown事件
$(td).bind("mousedown",recordStartLocation(td));
}
}
//生成表头
function createHeadTr(){
var str = "<tr id='ghead'>";
str += "<td style='width:60px;'><span style=\"font-size: 10px;\">星期\\小时</span></td>";
for(var i=0;i<=23;i++){
str += "<td style='width: 27px;'>"+i+"</td>";
}
str += "</tr>";
return str;
}
//生成tr
function createTr(nameEnglish,nameChinese,divNode,rowNum,list){
var str = "<tr id='"+nameEnglish+"'>";
str += "<td>"+nameChinese+"</td>";
//判断
if(list.length-1>0)
{
for(var i=0;i<=23;i++){
var id=nameEnglish+i;
str += "<td rownum="+rowNum+" id='"+id+"' onmouseup='recordEndLocation(this);' onmouseover=\"mouseAfter(this);\" flag='"+i+"' name='nameEnglish'>"+
"<span style='color:black;' id='price"+divNode.attr('id')+(priceNum++)+"'>"+list[i]+"</span>"+
"</td>";
}
str += "</tr>";
}
else
{
for(var i=0;i<=23;i++){
var id=nameEnglish+i;
str += "<td rownum="+rowNum+" id='"+id+"' onmouseup='recordEndLocation(this);' onmouseover=\"mouseAfter(this);\" flag='"+i+"' name='nameEnglish'>"+
"<span style='color:black;' id='price"+divNode.attr('id')+(priceNum++)+"'>"+list+"</span>"+
"</td>";
}
str += "</tr>";
}
return str;
}
function getDateNameEnglish(num){
var name = "";
switch(num){
case 1:
name = "Monday";
break;
case 2:
name = "Tuesday";
break;
case 3:
name = "Wednesday";
break;
case 4:
name = "Thursday";
break;
case 5:
name = "Friday";
break;
case 6:
name = "Saturday";
break;
case 7:
name = "Sunday";
break;
}
return name;
}
function getDateNameChinese(num){
var name = "";
switch(num){
case 1:
name = "星期一";
break;
case 2:
name = "星期二";
break;
case 3:
name = "星期三";
break;
case 4:
name = "星期四";
break;
case 5:
name = "星期五";
break;
case 6:
name = "星期六";
break;
case 7:
name = "星期天";
break;
}
return name;
}

 

自定义的弹出table的js,并为td赋值事件。在调用JS的页面有Id为hdiv的div层,弹出层后,td的事件取消绑定。如何实现?

我这个每次选中的都是从最后一个开始!!!

光标下的世界的主页 光标下的世界 | 初学一级 | 园豆:34
提问于:2014-05-19 09:45
< >
分享
所有回答(2)
0

排序啊

刘宏玺 | 园豆:14020 (专家六级) | 2014-05-19 10:22

我自己弄出来了。

谢谢!!!

支持(0) 反对(0) 光标下的世界 | 园豆:34 (初学一级) | 2014-05-19 10:23
0

绑定事件的时候在方法后面直接传值,相当于马上调用了该方法。应该如此

$(ts).bind("mousedown",{ogj:td},方法(event){

  方法(event.data.obj);

})

光标下的世界 | 园豆:34 (初学一级) | 2014-05-19 10:26
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册