<script>
    var left = document.getElementById('main-left');
    var right = document.getElementById('main-right');
    var array = document.getElementsByClassName('zone-box');
    function buildDiv(scroll, tb, size) {
        var old = scroll.getElementsByTagName("div");
        if (old.length > 0) {
            
 
for (var o = 0; o < old.length; o++) {
                old[o].remove();
            }
        }
        var tb2 = tb.cloneNode(true);
        var len = tb2.rows.length;
        for (var i = len; i > size; i--) {
            tb2.deleteRow(size);
        }
        var bak = document.createElement("div");
        bak.style.width 
 
= scroll.clientWidth + 'px';
        scroll.appendChild(bak);
        bak.appendChild(tb2);
        bak.style.position = "absolute";
        bak.style.backgroundColor = "#cfc";
        //表頭背景顏色，請保持和css中定義顏色一樣
        bak.style.display = "block";
        bak.style.left = 0;
        bak.style.top 
 
= "0px";
        scroll.onscroll = function () {
            bak.style.top = this.scrollTop + "px";
        }
    }
    window.onload = function () {
        for (var s = 0; s < array.length; s++) {
            if (array[s].getElementsByTagName('table').length > 0) {
                buildDiv(array[s], array[s].getElementsByTagName('table')[0], 1);
            }
        }
        //新增目錄
        var h2List = [], h3List = [], h4List = [];
        var i1 = 0, i2 = 0, i3 = 0, n1 = 0, n2 = 0, n3 = 0;
        var temp = '<dl>';
        var cateList = right.innerHTML.match(/(<h[2-5][^>]*>.*?<\/h[2-5]>)/ig);
        for (var i = 0; i < cateList.length; i++) {
            if (/(<h2[^>]*>.*?<\/h2>)/ig.test(cateList[i])) {
                n1++;
                n2 = 0;
                temp += '<dd class="cate-item1"><span>' + n1 + '</span><a href="#' + n1 + '">' + cateList[i].replace(/<[^>].*?>/g, "") + '</a></dd><div style="clear:both"></div>';
                h2List[i1] = n1;
                i1++;
            } else {
                if (/(<h3[^>]*>.*?<\/h3>)/ig.test(cateList[i])) {
                    n2++;
                    temp += '<dd class="cate-item2"><span>' + n1 + '.' + n2 + '</span><a href="#' + n1 + '_' + n2 + '">' + cateList[i].replace(/<[^>].*?>/g, "") + '</a></dd><div style="clear:both"></div>';
                    h3List[i2] = n1 + '_' + n2;
                    i2++;
                    n3 = 0;
                } else {
                    n3++;
                    temp += '<dd class="cate-item3"><span>' + n1 + '.' + n2 + '.' + n3 + '</span><a href="#' + n1 + '_' + n2 + '_' + n3 + '">' + cateList[i].replace(/<[^>].*?>/g, "") + '</a></dd><div style="clear:both"></div>';
                    h4List[i3] = n1 + '_' + n2 + '_' + n3;
                    i3++;
                }
            }
        }
        temp += '</dl>';
        left.innerHTML = temp;

        //預設第一個處於aitive狀態
        left.getElementsByTagName('dd')[0].className = left.getElementsByTagName('dd')[0].className + " active";
    };
    left.style.height = (document.documentElement.clientHeight - 200) + "px";
    window.onresize = function () {
        var array = document.getElementsByClassName('zone-box');
        for (var s = 0; s < array.length; s++) {
            if (array[s].getElementsByTagName('table').length > 0) {
                buildDiv(array[s], array[s].getElementsByTagName('table')[0], 1);
            }
        }
        left.style.height = (document.documentElement.clientHeight - 200) + "px";
    };

    //點選右側書籤新增active
    if (left.addEventListener) {
        left.addEventListener("click", function (e) {
            for (var c = 0; c < left.getElementsByTagName('dd').length; c++) {
                left.getElementsByTagName('dd')[c].className = left.getElementsByTagName('dd')[c].className.replace("active", "");
            }
            e.target.parentNode.className = e.target.parentNode.className + " active";
        });
    } else {
        left.attachEvent("onclick", function (e) {
            for (var c = 0; c < right.getElementsByTagName('dd').length; c++) {
                left.getElementsByTagName('dd')[c].className = left.getElementsByTagName('dd')[c].className.replace("active", "");
            }
            e.srcElement.parentNode.className = e.srcElement.parentNode.className + " active";
        })
    }
    window.onscroll = function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= 100) {
            left.style.position = "fixed";
            left.style.top = 10 + 'px';
        } else {
            left.style.position = "static";
        }
    }
</script>