js 可拖拽排序、插入的表格

wuzijingaip

浏览: 337293 次
性别:
来自: 广州

最近访客更多访客>>

jerry_shen

xsjwan

wmyydyzyq

lijun1191997

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Struts IE Microsoft Apache JavaScript

程序源码，为了一次性全粘贴把js全复制过来，很多和此无关

以下为很久以前写的，时至今日可以用 jQuery 以更少的代码完成更多的功能。

显示如图：

从项目里拿出，不可直接运行，（无相应的数据）
，源码如下:

<%@ page language="java" contentType="text/html; charset=GBK"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />

<style type="text/css">
#showOrHide{
position:absolute;
width:20;
height:20;
font-size:13px;
color:black;
background:beige url(images/windowimg.jpg) 100% ;
background-color: #D9E7F8;
border:2px solid #ABC7EC;
padding: 3;
cursor:move;
filter:
progid:DXImageTransform.Microsoft.Alpha(opacity=90)//
progid:DXImageTransform.Microsoft.MotionBlur(strength=1, direction=300)//
progid:DXImageTransform.Microsoft.Blur(pixelradius=0)
progid:DXImageTransform.Microsoft.Wheel(duration=8)
//PROGID:DXIMAGETRANSFORM.MICROSOFT.WAVE(strength=3,freq=3,lightstrength=20,add=0,phase=90)
;
}
</style>

<link rel="stylesheet" type="text/css" href="css/css.css">
<script src="js/cimage.js"></script>
<script type='text/javascript' src='dwr/interface/urlajax.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<link rel="stylesheet" type="text/css"
href="ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3/ext-all.js"></script>

<script type="text/javascript">

/**
*
* @param {} _self 触发体对象
* @param {} checkedName 待选的对象名
*/
function checkAllCheckBoxs(_self,checkedName){
var ls_obj;//临时对象
ls_obj = document.getElementsByName(checkedName);
for(var i=0;i<ls_obj.length;i++){

ls_obj[i].checked = _self.checked;

}
}

/////////////////////////////////////

function checkChildren(_self,_arrnumx,_arrnumy){
ls_obj = _self.children[_arrnumx].children[_arrnumy] ;
isChecked = ls_obj.checked;
if(isChecked)
ls_obj.checked = false;
else
ls_obj.checked = true;
}
function checkChildrenTrue(_self,_arrnumx,_arrnumy){
ls_obj = _self.children[_arrnumx].children[_arrnumy] ;
isChecked = ls_obj.checked;
if(isChecked)
ls_obj.checked = false;
else
ls_obj.checked = true;
}
function checkChildren1(_self,_arrnumx){
ls_obj = _self.children[_arrnumx] ;
isChecked = ls_obj.checked;
if(isChecked)
ls_obj.checked = false;
else
ls_obj.checked = true;
}

/////////////////////////////////////

////////////////////////////////////clicked and check all start
var canChecked = false;
var _checkItemNum = 0;
function setCanChecked(_ckd,_self,_arrnumx,_arrnumy){
canChecked = _ckd;
// if(_ckd){
//checkChildren(_self,_arrnumx,_arrnumy);
}

function moveToCheckChildren(_self,_arrnumx,_arrnumy){
if(canChecked == true){
// checkChildren(_self,_arrnumx,_arrnumy);
}
}

////////////////////////////////////clicked and check all end

function isIframeError(frameid){
var htmStr = document.frames[frameid].document.body.innerHTML;
if(htmStr.indexOf('res://shdoclc.dll/pagerror.gif') != -1){
return true;
}
return false;
}

////////////////drag div start//////////////////

////////// 1
var x,y,divLeft,divTop;
var isMove = false;
function MouseDown(obj)
{
isMove = true;
x = event.clientX;
y = event.clientY;
divLeft = obj.offsetLeft;
divTop = obj.offsetTop;
}
function MouseMove(obj)
{
if(isMove)
{
obj.style.left = divLeft + event.clientX - x;
obj.style.top = divTop + event.clientY - y;
}
}
function MouseUp(obj)
{
isMove = false;
}

////////////// 2
var windowused = false;
function showMsgBox(pname){//<div>

canrefresh = true;
addNameVal = pname;
if(event.button == 2)
return;
var sx = event.clientX+4;
var sy = event.clientY+4;
if(!windowused){
var MsgBox = document.all.showOrHide;
MsgBox.innerHTML = pname;
if(MsgBox.style.display=''){
return;
}
MsgBox.style.display='';
MsgBox.style.left=sx;
MsgBox.style.top=sy;
windowused = true;
}
}

function hideMsgBox(){//<div>
var MsgBox = document.all.showOrHide;
MsgBox.style.display='none';
windowused = false;
}

var dragapproved=true;
var zcor,xcor,ycor
function movescontentmain(){
if (event.button==1&&dragapproved){
zcor.style.pixelLeft=tempvar1+event.clientX-xcor
zcor.style.pixelTop=tempvar2+event.clientY-ycor
leftpos=document.all.showOrHide.style.pixelLeft-document.body.scrollLeft
toppos=document.all.showOrHide.style.pixelTop-document.body.scrollTop
return false
}
}
function dragscontentmain(){
if(event.button == 2)
return;
if (!document.all)
return
dragapproved=true
zcor=showOrHide
tempvar1=zcor.style.pixelLeft+4//-15
tempvar2=zcor.style.pixelTop+4//-30
xcor=event.clientX
ycor=event.clientY
document.onmousemove=movescontentmain
}
document.onmousedown=dragscontentmain
document.onmouseup=new Function("dragapproved=false")

////////////////drag div end //////////////////
var _contextArrs = new Array();
var _ls_bgcolor;
function mediaItemClicked(trobj){
trobj.style.backgroundColor = "#E3F1FD";
}
function refreshAddedView(){
var showElementobj = document.getElementById('showElementHaveFileTable');
deleteTableAllTr(showElementobj,0);
var titleArr = new Array();
titleArr.push('<input type=checkbox onclick="checkAllCheckBoxs(this,\'playlistitems\')" />');
titleArr.push('<bean:message key="msg.page.playlist.num"/>');
titleArr.push('<bean:message key="msg.page.playlist.name"/>');
titleArr.push('<bean:message key="msg.page.log.label.Duration"/>');

/* for(var i=-1;i<100;i++){
innerHTML2Table(contextArr,showElementobj,titleArr,0,0,i);//title
}*/
for(var i=-1;i<_contextArrs.length;i++){
var ctArr = _contextArrs[i];
innerHTML2Table(ctArr,showElementobj,titleArr,0,0,i);
}
}

var change_oldindex = 0;
var old_checked_box_index = 0;
function activeOneFile(indexid,oid,location,type,filename,who){
change_oldindex = indexid;
if(who == 1){
old_checked_box_index = indexid;
}
activeFileArr = new Array();
activeFileArr.push(oid+"-"+type);
activeFileArr.push(filename);
activeFileArr.push("0");
}

var activeFileArr = new Array();
var waitForChangeArr = new Array();
function activeFile(indexid,oid,location,type,filename){
//alert(indexid+'    '+oid+'    '+location+'    '+type+'    '+filename);
actionType = "add";
activeFileArr = new Array();
activeFileArr.push(oid+"-"+type);
activeFileArr.push(filename);
activeFileArr.push("0");
//activeFileArr.push(indexid);

_contextArrs.push(activeFileArr);
// for(var i=0;i<activeFileArr.length;i++){
// alert(activeFileArr[i]);
// }
}
//----------------------------------------------------- append start -------------------------------------------------------
function appendFileToelement(oid,location,type,filename){
//alert(oid+' '+location+' '+type+' '+filename+'--');
var showElementobj = document.getElementById('showElementHaveFileTable');

var titleArr = new Array();
titleArr.push('<bean:message key="msg.page.playlist.num"/>');
titleArr.push('<bean:message key="msg.page.playlist.name"/>');
titleArr.push('<bean:message key="msg.page.log.label.Duration"/>');

var contextArr = new Array();
contextArr.push(oid+'-'+type);
contextArr.push(filename);
contextArr.push('0');
var trobj = showElementobj.getElementsByTagName('tr');
//appendHTML2Table(contextArr,showElementobj,titleArr,0,0,trobj.length - 1);//title
refreshAddedView();
}
function deleteTableAllTr(obj,startTr){
tro = obj.getElementsByTagName('TR');
for(var i=tro.length-1;i>=0;i--){
if(i>=startTr){
tro[i].parentNode.removeChild(tro[i]);
}else{
return tro[i];
}
}
}

function appendHTML2Table(innArray,tableobj,titleArr,starttr,starttd,index){

//item
var newTr = tableobj.insertRow();

    for(var i=-1;i<innArray.length;i++){
    var newTD = newTr.insertCell();
    if(i==-1){
    newTr.ondblclick = function(){ }
    newTD.innerHTML = " <input name='fileids' id='fileids' value="+innArray[0]+" type='hidden' />";
    newTD.align='center';
    newTD.style.width='15px';
    newTD.colspan="1"
    }else if(i == 0){
    newTD.innerHTML = index-0+1;
    newTD.setAttribute('class','font4');
    newTD.style.cssText="font-size:11px;color:#000000;font-family:Arial, Helvetica, sans-serif;";
    newTD.align='left';
    }else{
    newTD.innerHTML = innArray[i];
    newTD.setAttribute('class','font4');
    newTD.style.cssText="font-size:11px;color:#000000;font-family:Arial, Helvetica, sans-serif;cursor: pointer;";
    var al = 'center';
    if(i == 1)al = 'left';
newTD.align = al;
    }
    }
    if(index % 2 == 0){
    newTr.style.backgroundColor = "#ffffff";
   }else{
    newTr.style.backgroundColor = "#eeeeee";
   }
    newTr.align = "left";
    newTr.style.height='25px';
    newTr.style.cssText="cursor: pointer;";
    //newTr.setAttribute('onclick','javascript:alert();');
    newTr.onclick = function(){ };
    newTr.onmousedown = function(){actionType = "update";elementFileItemCheck(this);showMsgBox('');};
    newTr.onmouseup = function(){changeElementFileItemIndex(this);hideMsgBox();};//="(this)"
    newTr.onmouseover = function(){_ls_bgcolor = this.style.backgroundColor; this.style.backgroundColor='#E3F1FD';};
    newTr.onmouseout = function(){ this.style.backgroundColor=_ls_bgcolor; };//for IE

}
//----------------------------------------------------- append end -------------------------------------------------------
function innerHTML2Table(innArray,tableobj,titleArr,starttr,starttd,index){
if(index < 0){//title
var newTrTitle = tableobj.insertRow();

    for(var i=0;i<titleArr.length;i++){
var newTdTitle = newTrTitle.insertCell();
newTdTitle.innerHTML = titleArr[i];
newTdTitle.background = "${pageContext.request.contextPath }/images/title_bg.gif;";
newTdTitle.setAttribute("class","font3");
newTdTitle.style.cssText = "font-size:11px; color:#04205A;font-weight:bold;font-family:Arial, Helvetica, sans-serif;";
    var al = 'center';
    if(i == 2)al = 'left';
newTdTitle.align = al;
}
newTrTitle.style.height = 23;
return;
}
//item
var newTr = tableobj.insertRow();
    for(var i=-1;i<innArray.length;i++){
    var newTD = newTr.insertCell();
    if(i==-1){
    newTr.ondblclick = function(){ }
    newTD.innerHTML = "<input name='playlistitems' id='playlistitem'"+i+" value="+innArray[0]+" type='checkbox' />";
    newTD.align='center';
    newTD.style.width='40px';
    }else if(i == 0){
    newTD.innerHTML = index-0+1;
    newTD.setAttribute('class','font4');
    newTD.style.cssText="font-size:11px;color:#000000;font-family:Arial, Helvetica, sans-serif;";
    newTD.align='center';

    newTD.onmousedown = function(){actionType = "update";canrefresh = true;activeOneFile(index-0+1,innArray[0].split("-")[0],'',innArray[0].split("-")[1],innArray[1],1) ;showMsgBox(innArray[1]); };
    newTD.onmouseup = function(){addOrChangeNameArr(index);hideMsgBox();canrefresh = false;}
    }else if(i == (innArray.length -1)){
    newTD.innerHTML =
    '<input type="text" size="8" id="innduration'+(index-0+1)
    +'" onkeyup="changeArrDuration('+(index-0+1)+',this.value)" onmouseover="this.select()" value="'+innArray[i]+'"/>'
newTD.align = 'center';
    }else{
    newTD.innerHTML = innArray[i];
    newTD.setAttribute('class','font4');
    newTD.style.cssText="font-size:11px;color:#000000;font-family:Arial, Helvetica, sans-serif;";
    var al = 'center';
    if(i == 1)al = 'left';
newTD.align = al;

    newTD.onmousedown = function(){actionType = "update";canrefresh = true;activeOneFile(index-0+1,innArray[0].split("-")[0],'',innArray[0].split("-")[1],innArray[1],1) ;showMsgBox(innArray[1]); };
    newTD.onmouseup = function(){addOrChangeNameArr(index);hideMsgBox();canrefresh = false;}
    }
    }
    if(index % 2 == 0){
    newTr.style.backgroundColor = "#ffffff";
   }else{
    newTr.style.backgroundColor = "#eeeeee";
   }
    newTr.align = "left";
    newTr.style.height='23px'; //newTr.setAttribute('onclick','javascript:alert();');
    newTr.onclick = function(){ };
    newTr.onmouseover = function(){_ls_bgcolor = this.style.backgroundColor; this.style.backgroundColor='#E3F1FD';};
    newTr.onmouseout = function(){ this.style.backgroundColor=_ls_bgcolor; };//for IE
//     newTr.attachEvent('onclick',function(){checkChildren(this,0,0);});//for IE
}

var addNameVal = "";
var actionType = "add";
var canrefresh = true;

function addOrChangeNameArr(arrIndex){

if(actionType == 'add'){
_contextArrs.splice(arrIndex,0,activeFileArr);//add
}else{
if(canrefresh){
_contextArrs.splice(change_oldindex-1,1);//delete

_contextArrs.splice(arrIndex,0,activeFileArr);//add
}
}
if(canrefresh)
refreshAddedView()
}

function elementFileItemCheck(iobj){
oldTrobj = iobj;
old_FileArr = new Array();
var showElementobj = document.getElementById('showElementHaveFileTable');
var trobj = showElementobj.getElementsByTagName('tr');
for(var i=0;i<trobj.length;i++){
if(iobj == trobj[i]){
for(var j=0;j<trobj[i].children.length;j++){
var tdo = trobj[i].children[j];
if(j==0){
for(var k=0;k<tdo.children.length;k++){
old_FileArr.push(tdo.children[k].value);
}
}
if(tdo.outerText != ''){
old_FileArr.push(tdo.outerText);
}
}
}
}
}

var oldTrobj ;
var old_FileArr = new Array();
var change_FileArr = new Array();

function changeElementFileItemIndex(obj){
change_FileArr = new Array();
for(var j=0;j<obj.children.length;j++){
var tdo = obj.children[j];
if(j==0){
for(var k=0;k<tdo.children.length;k++){
change_FileArr.push(tdo.children[k].value);
}
}
if(tdo.outerText != ''){
change_FileArr.push(tdo.outerText);
}
}
setTrobjValue(obj,old_FileArr);
setTrobjValue(oldTrobj,change_FileArr);
}

function setTrobjValue(trobj,arr){
/*
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}*/
for(var j=0;j<trobj.children.length;j++){
var tdo = trobj.children[j];
if(j==0){
for(var k=0;k<tdo.children.length;k++){
tdo.innerHTML = ' <input type="hidden" name="fileids" id="fileid" value="'+arr[j]+'" />';
}
}
if(j > 1 ){
tdo.innerHTML = arr[j + 1];
}
}
}

function deletePlaylistfile(){

var showElementobj = document.getElementById('showElementHaveFileTable');
var trobj = showElementobj.getElementsByTagName('tr');
for(var i=trobj.length-1;i>0;i--){
var _indexid = 0;
var id_type = "";
for(var j=0;j<trobj[i].children.length;j++){
var tdo = trobj[i].children[j];
if(j==0){
for(var k=0;k<tdo.children.length;k++){
id_type = tdo.children[k].checked
}
}
}
if(id_type){
_contextArrs.splice(i-1,1);//delete
}
}
refreshAddedView();
}

function changeArrDuration(indexid,duration){
for(var i=0;i<_contextArrs.length;i++){
if((indexid-1) == i){
var arr = _contextArrs[i];
arr[2] = duration;
}
}
}

//----------------------------------save start-------------------------------------------
var saveArr ;
function savePlaylist(){
saveArr = new Array();
var showElementobj = document.getElementById('showElementHaveFileTable');
var trobj = showElementobj.getElementsByTagName('tr');
for(var i=1;i<trobj.length;i++){
var lsstr = "";//mediaid-type,'',indexid,filename,duration
var _indexid = 0;
var _fname = "";
var dur_ation = 0;
for(var j=0;j<trobj[i].children.length;j++){
var tdo = trobj[i].children[j];
if(j==0){
for(var k=0;k<tdo.children.length;k++){
lsstr += tdo.children[k].value +",,";
}
}
if(j==1){
_indexid = tdo.outerText.replace(" ","");
}
if(j == 2){
_fname = tdo.outerText.replace(" ","");
}
if(j == 3){
var _d = tdo.innerHTML;
dur_ation = _d.substring(_d.indexOf("value=")+6).replace(">","").replace(" ","");
}
}
lsstr += _indexid + ',' + _fname+','+dur_ation;

saveArr . push (lsstr);
}
if(false){
alert( createSaveMsg());
}else{
document.getElementById('filemsgs').value = createSaveMsg();
document.form1.submit();
}
}
function createSaveMsg(){
var rtnStr = "";
for(var i=0;i<saveArr.length;i++){
var oneSaveMsg = saveArr[i];//mediaid-type,'',indexid,filename,duration
var oneMsgs = oneSaveMsg.split(',');
var mediaid_mediatype = oneMsgs[0];
var filename = oneMsgs[3];
var duration = oneMsgs[4];
var indexid = oneMsgs[2];
rtnStr += mediaid_mediatype + ','+filename+','+duration+','+indexid +';';
}
return rtnStr;
}

function deleteOneFile(tdobj){
//alert(tdobj.parentNode);
var showElementobj = document.getElementById('showElementHaveFileTable');
var trobj = showElementobj.getElementsByTagName('tr');
for(var i=0;i<trobj.length;i++){
if(tdobj.parentNode == trobj[i]){

}
}
}

</script>

</head>

<body bgcolor="#FFFFFF">
<DIV align="center" id="inputElementfileDiv" style="display:none; scrollbar-face-color:#bbddfa; zoom:1;text-align: inherit;scrollbar-shadow-color:#99bbe8; scrollbar-track-color: #e0e8f3; scrollbar-arrow-color: black; left:0;width:440; height:340; overflow-y:auto;">

</DIV>
<div id="selectwebdiv" style="display:none">
<table width="350" border="0" cellspacing="0" cellpadding="0"
align="center">
<tr>
<td height="28">
<table width="98%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"> 

</td>
<td width="98%" class="font7">
<bean:message key="msg.page.url.label.newwebsite" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="95%" border="1" cellspacing="0" cellpadding="0"
bordercolor="#97B9E8"
style="border-bottom:0px;border-left:0px;border-right:0px;border-top:0px"
align="center">
<tr>
<td>
<table width="320" border="0" cellspacing="0" cellpadding="0"
align="center">
<tr>
<td width="36" class="font3" height="50">
<bean:message key="msg.page.usr.label.type" />
</td>
<td width="124">
<table width="98%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="12%">
<input name="radio" id="radio1" type="radio" value="1"
onClick="selectvalue(this.value)">
</td>
<td width="88%" class="font1">
<bean:message key="msg.page.url.label.typeone" />
</td>
</tr>
</table>
</td>
<td width="160">
<table width="98%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="12%">
<input name="radio" id="radio2" type="radio" value="0"
checked onClick="selectvalue(this.value)">
</td>
<td width="88%" class="font1">
<bean:message key="msg.page.url.label.typetwo" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0"
height="30">
<tr>
<td width="57%"> 

</td>
<td width="20%" class="hand">
<img src="<bean:message key='msg.page.image.url.ok'/>"
border="0" onClick="sbmit1();" />
</td>
<td width="23%" class="hand">
<img src="<bean:message key='msg.page.image.url.close'/>"
border="0" onClick="_close(win1);" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="websitediv" style="display:none">
<table width="400" border="0" cellspacing="0" cellpadding="0"
height="250" align="center">
<tr>
<td height="20">
<table width="98%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"> 

</td>
<td width="98%">
<div id="title" class="font7"></div>
<input type="hidden" name="uid" id="uid" />
<input type="hidden" name="fag" id="fag" value="0" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="95%" border="0" cellspacing="0" cellpadding="0"
align="center">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0"
bordercolor="#CCF1FF"
style="border-left:0px;border-right:0px;border-top:0px;border-bottom:0px;">
<tr>
<td>
<table width="100%" border="1" cellspacing="0"
cellpadding="0" bordercolor="#97B9E8"
style="border-left:0px;border-right:0px;border-top:0px;border-bottom:0px;">
<tr>
<td>
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="10" height="30"> 

</td>
<td class="font3">
<bean:message key="msg.page.all.name" />
:
</td>
<td>
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="45%">
<input type="text" name="name" size="26" id="name"
onKeyUp="checkname(this.value);" class="font1" />
</td>
<td width="55%">
<div id="tips" class="font3"
style="color:#FF0000;"></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30"> 

</td>
<td width="222" class="font3">
<bean:message key="msg.page.usr.label.urlb" />
:
</td>
<td width="583">
<input type="text" id="url" name="url" size="54"
class="font1" />
</td>
</tr>
<tr>
<td height="30"> 

</td>
<td class="font3">
<bean:message key="msg.page.usr.label.description" />
:
</td>
<td>
<textarea name="description" id="description"
cols="56" rows="5" class="font1"></textarea>
</td>
</tr>
<tr>
<td height="30"> 

</td>
<td colspan="2">
<div id="livediv" style="display:block">
<table width="98%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="8%" class="font3">
<bean:message key="msg.page.usr.label.type" />
</td>
<td width="38%">
<table width="98%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="15%">
<input name="flag" id="flag1" type="radio"
value="1">
</td>
<td width="85%" class="font1">
<bean:message key="msg.page.url.label.typeone" />
</td>
</tr>
</table>
</td>
<td width="54%">
<table width="98%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="10%">
<input name="flag" type="radio" id="flag2"
value="0" checked="checked">
</td>
<td width="90%" class="font1">
<bean:message key="msg.page.url.label.typetwo" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

</td>
</tr>
<tr>
<td height="50">
<table width="97%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="64%"> 

</td>
<td width="18%" class="hand">
<img src="<bean:message key='msg.page.image.url.ok'/>"
border="0" onClick="check()" />
</td>
<td width="18%" class="hand">
<img src="<bean:message key='msg.page.image.url.close'/>"
border="0" onClick="_close(win2)" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<form name="form1" method="post" action="${pageContext.request.contextPath }/playlistaction.do?method=add_ePlaylist">
<table width="101%" border="0" cellspacing="0" cellpadding="0"
height="100%">
<tr>
<td height="8"></td>
</tr>
<tr>
<td width="101%" height="25">
<table width="98%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"> 

</td>
<td width="65%" class="font7">
<bean:message key="msg.page.playlist.editelement"/>
</td>
<td width="33%"> 

</td>
</tr>
</table>
</td>
</tr>

<tr>
<td height="96%" valign="middle" align="center">
<table width="96%" border="1" cellspacing="0" cellpadding="0"
bordercolor="#A6B8D0"
style="border-left:0px;border-right:0px;border-top:0px;border-bottom:0px;"
height="100%">
<tr>
<td height="30" style="border-bottom:0px;" bgcolor="#D5E2F2">

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30%">

<input type="text" value="${playlistname }" id="playlistnameInput" name="playlistnameInput" readonly="readonly" />
<input type="hidden" id="playlistname" name="playlistname" value="${playlistname }" />
<input type="hidden" id="playlistid" name="playlistid" value="${playlistid }" />
<input type="hidden" id="templateid" name="templateid" value="${templateid }" />
<input type="hidden" id="elementid" name="elementid" value="${elementid }"/>
<input type="hidden" id="templatename" name="templatename" value="${templatename }" />
<input type="hidden" id="elementtype" name="elementtype" value="${elementtype }" />
<input type="hidden" id="elementname" name="elementname" />
<input type="hidden" id="filemsgs" name="filemsgs" />

<div id="showOrHide" style="display:'none';"> </div>
</td>
<td> 
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="border-bottom:0;border-top:0px;"
bgcolor="#FFFFFF">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" bordercolor="#A6B8D0">
<tr style="border-bottom:0;border-top:0px;">
<td bgcolor="#FFFFFF" valign="top">

<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#A6B8D0" style="border-bottom:0;border-top:0px;border-left:0px;border-right: 0px;">
<tr>
<td width="20%" valign="top" style="border-left:0px;border-right: 0px;border-bottom: 0px;">

<table onselectstart="return false;" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr height="23" class="font3" >
<td background="${pageContext.request.contextPath }/images/title_bg.gif">
<bean:message key="msg.page.playlist.files"/>
</td>
</tr>
<tr>
<td valign="top">
<div style="scrollbar-face-color:#bbddfa; zoom:1;    scrollbar-shadow-color:#99bbe8;
scrollbar-track-color: #e0e8f3; scrollbar-arrow-color: black; left:0;width:100%; height:100%; overflow-y:auto;">
<table class="font4" width="100%" cellpadding="0" cellspacing="0">
<logic:iterate id="item" name="mediaList" indexId="indexId">
<tr bgcolor="${indexId % 2==0?'#ffffff':'#eeeeee' }" onmouseover="this.style.backgroundColor='#E3F1FD';" onmouseout="this.style.backgroundColor='';" height="23" onclick="mediaItemClicked(this)">
<td width="10">
 
</td>
<td>
<div onmousedown="activeOneFile ('${indexId + 1 }','${item.locationid }','${item.location }','${item.elem_Type }','${item.name }',0) ;showMsgBox('${item.name }');" onmouseup="hideMsgBox();" ondblclick="activeFile('${indexId + 1 }','${item.locationid }','${item.location }','${item.elem_Type }','${item.name }') ;appendFileToelement('${item.locationid}','${item.location }','${item.elem_Type }','${item.name }')" style="width:190px;height:23px;white-space:nowrap;word-break:keep-all;overflow:hidden;text-overflow:ellipsis;cursor: pointer;"> ${item.name }</div>
</td>
</tr>
</logic:iterate>
</table>
</div>
</td>
</tr>
</table>

</td>
<td width="30" style="border-top: 0px;border-right: 0px;border-bottom: 0px; " valign="middle" >
<img src="${pageContext.request.contextPath }/images/jianY.gif" />
</td>
<td valign="top" style="border-bottom:0;border-right: 0px;">

<div onmouseup="hideMsgBox();" style="scrollbar-face-color:#bbddfa; zoom:1;    scrollbar-shadow-color:#99bbe8;
scrollbar-track-color: #e0e8f3; scrollbar-arrow-color: black; left:0;width:100%; height:100%; overflow-y:auto;">
<table id="showElementHaveFileTable" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr class="font3" height="23">
<td align="center" width="40" background="${pageContext.request.contextPath }/images/title_bg.gif">
<input type=checkbox onclick="checkAllCheckBoxs(this,'playlistitems')" />
</td>
<td width="70" align="center" background="${pageContext.request.contextPath }/images/title_bg.gif">
<bean:message key="msg.page.playlist.num"/>
</td>
<td align="left" background="${pageContext.request.contextPath }/images/title_bg.gif">
<bean:message key="msg.page.playlist.name"/>
</td>
<td align="center" background="${pageContext.request.contextPath }/images/title_bg.gif">
<bean:message key="msg.page.log.label.Duration"/>
</td>
</tr>
<logic:iterate id="item" name="elementList" indexId="indexId" >
<script>
var addArr = new Array();
actionType = "add";
addArr = new Array();
addArr.push(${item.locationid }+"-"+${item.type });
addArr.push('${item.name }');
addArr.push('${item.zindex }');

_contextArrs.push(addArr);
</script>
<tr height="23" class="font1" style="cursor: pointer;" bgcolor="${indexId % 2 == 0?'#FFFFFF':'#eeeeee' }" class="font4" style="cursor: pointer;" onmouseover="this.style.backgroundColor='#E3F1FD';" onmouseout="this.style.backgroundColor='';" >
<td align="center" width="36">
<input name='playlistitems' id='playlistitem${indexId }' value="${item.locationid }-${item.type }" type='checkbox' />
</td>
<td onselectstart="return false;" align="center" onmousedown="actionType = 'update';canrefresh = false;activeOneFile(${indexId + 1 },'${item.locationid }','','${item.type }','${item.name }',1) ;showMsgBox('${item.name }');" onmouseup="addOrChangeNameArr(${indexId });hideMsgBox();canrefresh = false;" >
${indexId + 1 }
</td>
<td onselectstart="return false;" onmousedown="actionType = 'update';canrefresh = false;activeOneFile(${indexId + 1 },'${item.locationid }','','${item.type }','${item.name }',1) ;showMsgBox('${item.name }');" onmouseup="addOrChangeNameArr(${indexId });hideMsgBox();canrefresh = false;" >
${item.name }
</td>
<td align="center" >
<input type="text" size="8" onkeyup="changeArrDuration('${indexId + 1 }',this.value)" onmouseover="this.select()" value="${item.zindex }"/>
</td>
</tr>
</logic:iterate>
</table>
</div>

</td>
</tr>
</table>

</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30"
style="border-left:0px;border-right:0px;border-bottom:0px;">
<table width="100%">
<tr>
<td width="80%">
</td>
<td>
<img src="${pageContext.request.contextPath }/<bean:message key="msg.page.image.url.deleteb"/>" style="cursor: pointer;" onClick="deletePlaylistfile()" />
</td>
<td>
<img src="${pageContext.request.contextPath }/<bean:message key="msg.page.image.url.saveb"/>" style="cursor: pointer;" onClick="savePlaylist()" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>