You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
4.8 KiB
141 lines
4.8 KiB
3 months ago
|
$(".container #topTemplate td:not(.verticalLine)").click(function(element){
|
||
|
if($(element.target).hasClass('selected')){
|
||
|
$(element.target).removeClass('selected')
|
||
|
}else{
|
||
|
$(element.target).addClass('selected')
|
||
|
}
|
||
|
clickAction();
|
||
|
})
|
||
|
$(".container #bottomTemplate td:not(.verticalLine)").click(function(element){
|
||
|
if($(element.target).hasClass('selected')){
|
||
|
$(element.target).removeClass('selected')
|
||
|
}else{
|
||
|
$(element.target).addClass('selected')
|
||
|
}
|
||
|
clickAction();
|
||
|
})
|
||
|
function clickAction(){
|
||
|
var topElement = $("#topTemplate").children();
|
||
|
var bottomElement = $("#bottomTemplate").children();
|
||
|
var topLeftArr=[];
|
||
|
var topRightArr=[];
|
||
|
var bottomLeftArr=[];
|
||
|
var bottomRightArr=[];
|
||
|
for(var i=0;i<topElement.length;i++){
|
||
|
if(topElement[i].className==='leftTop selected'){
|
||
|
topLeftArr.push(topElement[i].innerHTML)
|
||
|
}
|
||
|
}
|
||
|
for(var i=0;i<topElement.length;i++){
|
||
|
if(topElement[i].className==='rightTop selected'){
|
||
|
topRightArr.push(topElement[i].innerHTML)
|
||
|
}
|
||
|
}
|
||
|
for(var i=0;i<bottomElement.length;i++){
|
||
|
if(bottomElement[i].className === 'leftBottom selected'){
|
||
|
bottomLeftArr.push(bottomElement[i].innerHTML)
|
||
|
}
|
||
|
}
|
||
|
for(var i=0;i<bottomElement.length;i++){
|
||
|
if(bottomElement[i].className === 'rightBottom selected'){
|
||
|
bottomRightArr.push(bottomElement[i].innerHTML)
|
||
|
}
|
||
|
}
|
||
|
if(topLeftArr.length === 0 && topRightArr.length === 0 && bottomLeftArr.length === 0 && bottomRightArr.length === 0){
|
||
|
$(".display").css("display","none")
|
||
|
return
|
||
|
}
|
||
|
$(".display").empty();
|
||
|
var displayContent = "<div>已选项预览:<table id='hytable'>";
|
||
|
if(topLeftArr.length >0 || topRightArr.length >0){
|
||
|
displayContent +="<tr id='displayTop'>";
|
||
|
|
||
|
if(bottomLeftArr.length >0 && bottomLeftArr.length > topLeftArr.length){
|
||
|
for(var i=0;i<bottomLeftArr.length-topLeftArr.length;i++){
|
||
|
displayContent +="<td style='border: 0px;background: #fff'></td>";
|
||
|
}
|
||
|
}
|
||
|
if(topLeftArr.length >0 ){
|
||
|
for(var i=0;i<topLeftArr.length;i++){
|
||
|
displayContent +="<td>"+topLeftArr[i]+"</td>";
|
||
|
}
|
||
|
|
||
|
}
|
||
|
displayContent +="<td class='verticalLine'></td>";
|
||
|
if(topRightArr.length >0){
|
||
|
for(var i=0;i<topRightArr.length;i++){
|
||
|
displayContent +="<td>"+topRightArr[i]+"</td>";
|
||
|
}
|
||
|
displayContent +="</tr>";
|
||
|
}
|
||
|
}
|
||
|
displayContent +="<tr><td class='horizentalLine' colspan='18'></td> </tr>";
|
||
|
if(bottomLeftArr.length >0 || bottomRightArr.length >0){
|
||
|
displayContent +="<tr id='displayBottom'>";
|
||
|
if(topLeftArr.length>0 && topLeftArr.length > bottomLeftArr.length){
|
||
|
for(var i=0;i<topLeftArr.length-bottomLeftArr.length;i++){
|
||
|
displayContent +="<td style='border: 0px;background: #fff'></td>";
|
||
|
}
|
||
|
}
|
||
|
if(bottomLeftArr.length >0 ){
|
||
|
for(var i=0;i<bottomLeftArr.length;i++){
|
||
|
displayContent +="<td>"+bottomLeftArr[i]+"</td>";
|
||
|
}
|
||
|
}
|
||
|
displayContent +="<td class='verticalLine'></td>";
|
||
|
if(bottomRightArr.length >0){
|
||
|
for(var i=0;i<bottomRightArr.length;i++){
|
||
|
displayContent +="<td>"+bottomRightArr[i]+"</td>";
|
||
|
}
|
||
|
displayContent +="</tr>";
|
||
|
}
|
||
|
}
|
||
|
displayContent +="</table></div>";
|
||
|
|
||
|
$(".display").css("display","block")
|
||
|
$(".display").append(displayContent)
|
||
|
}
|
||
|
function callbackdata(){
|
||
|
var displayTopRow = document.getElementById("displayTop");
|
||
|
var leftTop ="";
|
||
|
var rightTop ="";
|
||
|
if(displayTopRow !=null){
|
||
|
var topLen = displayTopRow.cells.length;
|
||
|
var topRow = displayTopRow.cells;
|
||
|
var temp ="";
|
||
|
for(var i=0;i<topLen;i++){
|
||
|
if(topRow[i].innerText==""){
|
||
|
temp+='#';
|
||
|
}else{
|
||
|
temp+=topRow[i].innerText;
|
||
|
}
|
||
|
}
|
||
|
leftTop = temp.split("#")[0];
|
||
|
rightTop = temp.split("#")[1];
|
||
|
}
|
||
|
|
||
|
|
||
|
var leftBottom = "";
|
||
|
var rightBotton ="";
|
||
|
var displayBottomRow = document.getElementById("displayBottom");
|
||
|
if(displayBottomRow !=null){
|
||
|
var buttonmLen = displayBottomRow.cells.length;
|
||
|
var buttonmRow = displayBottomRow.cells;
|
||
|
var temp ="";
|
||
|
for(var i=0;i<buttonmLen;i++){
|
||
|
if(buttonmRow[i].innerText==""){
|
||
|
temp+='#';
|
||
|
}else{
|
||
|
temp+=buttonmRow[i].innerText;
|
||
|
}
|
||
|
}
|
||
|
leftBottom = temp.split("#")[0];
|
||
|
rightBotton = temp.split("#")[1];
|
||
|
}
|
||
|
var hyMap = new Map();
|
||
|
hyMap.set("leftTop",leftTop);
|
||
|
hyMap.set("rightTop",rightTop);
|
||
|
hyMap.set("leftBottom",leftBottom);
|
||
|
hyMap.set("rightBotton",rightBotton);
|
||
|
return hyMap;
|
||
|
}
|