$(".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;
}