詳情顯示框——當點擊詳情按鈕的時候將所有隱藏信息以彈框的形式顯示出來

適用條件：當表格中的信息過多的時候，將部分信息隱藏，只有當點擊詳情按鈕的時候將所有信息以彈框的的形式表示出來。

適用的技術：easyui中的彈框技術，html，css,javascript

展示效果：

點擊表格中的第一行詳情的時候的顯示效果：

1.html詳情信息框，設置詳情顯示框的狀態為隱藏，當點擊詳情的時候才會彈出。

代碼如下：

<!--詳細信息顯示-->
    <!--closed="true" 表示詳情彈出框默認關閉不顯示-->
<div id="w"  class="easyui-window" title="詳細信息" modal="true"  closed="true"  style="width:340px;top:125px;margin:0 auto">
    <form action="" method="post" id="form2" style="padding-top: 20px;">
        <table style="border-collapse:separate; border-spacing:10px;font-size:18px;"  align="center" id="tableId1">
            <tr>
                <th align="right">客戶名</th>
                <td>
                    <input type="text"  id="customer" name="customer" readonly="true"/>
                    <!--<span  id="username1" name="username1" style="width: 200px; height: 50px; border: 1px solid red;"></span>-->
                </td>
            </tr>
            <tr>
                <th align="right">電話</th>
                <td><input type="text"  id="phonenumber" name="phonenumber"  readonly="true" /></td>
            </tr>
            <tr>
                <th align="right">縣區</th>
                <td><input type="text"  id="couties" name="couties" readonly="true"/></td>
            </tr>
            <tr>
                <th align="right">支局類型</th>
                <td><input type="text"  id="subtype" name="subtype" readonly="true"/></td>
            </tr>
            <tr>
                <th align="right">支局名稱</th>
                <td><input type="text"  id="subname" readonly="true" display="true" name="subname" data-options=" "/></td>
            </tr>
            <tr>
                <th align="right">錄入時間</th>
                <td><input type="text"  id="dateString" readonly="true" display="true" name="dateString" data-options=" "/></td>
            </tr>
            <tr>
                <th align="right">詳細地址</th>
                <td><input type="text"  id="detailedaddress" name="detailedaddress1" readonly="true"/></td>
            </tr>
            <tr>
                <th align="right">分纖箱號</th>
                <td><input type="text"  id="Fiberopticnumber" readonly="true" display="true" name="fiberopticnumber1" data-options=" "/></td>
            </tr>

            <tr>
                <th align="right">裝維人員</th>
                <td><input type="text"  id="Username" readonly="true" display="true" name="username1" data-options=" "/></td>
            </tr>
            <tr>
                <th align="right">分纖箱位置圖片</th>
                <td id='fenqianlocation' > </td>
            </tr>
            <tr>
                <th align="right">大門照片</th>
                <td id='door'></td>
            </tr>
            <tr>
                <th align="right">居住照片</th>
                <td id='live'> </td>
            </tr>
            <tr>
                <th align="right">寬帶供應商</th>
                <td><input type="text"   id="provider" readonly="true" display="true" name="provider1" data-options=" "/></td>
            </tr>
            <tr>
                <th align="right">協議到期時間</th>
                <td><input type="text"  id="expire" readonly="true" display="true" name="expire1" data-options=" "/></td>
            </tr>
        </table>
    </form>
</div>
</div>
2.獲取表格信息，並顯示：

function modify(obj){
    var ocustomen = document.getElementById('customer');
    var ophonenumber = document.getElementById('phonenumber');
    var oUsername = document.getElementById('Username');
    var ocouties = document.getElementById('couties');
    var osubtype = document.getElementById('subtype');
    var osubname = document.getElementById('subname');
    var odateString = document.getElementById('dateString');
    var odetailedaddress = document.getElementById('detailedaddress');
    var oFiberopticnumber = document.getElementById('Fiberopticnumber');
    var ofenaddimg = document.getElementById('fenqianlocation');
    var odoor = document.getElementById('door');
    var olive = document.getElementById('live');
    var oprovider = document.getElementById('provider');
    var oexpire = document.getElementById('expire');

    var oTr = obj.parentNode.parentNode;
    var aTd = oTr.getElementsByTagName('td');
    rowIndex = obj.parentNode.parentNode.rowIndex;

    ocustomen.value = aTd[1].innerHTML;
    ophonenumber.value = aTd[2].innerHTML;
    oUsername.value = aTd[3].innerHTML;
    ocouties.value = aTd[4].innerHTML;
    osubtype.value = aTd[5].innerHTML;
    osubname.value = aTd[6].innerHTML;
    odateString.value = aTd[7].innerHTML;
    odetailedaddress.value=aTd[8].innerHTML;
    oFiberopticnumber.value=aTd[9].innerHTML;
    //使用jQuery獲取圖片路徑，並以圖片的格式展示出來
    $('#fenqianlocation').html('');
    $('#fenqianlocation').append("<img src='"+aTd[10].innerHTML+"'width=100px;'/>");
    $('#door').html('');
    $('#door').append("<img src='"+aTd[11].innerHTML+"'width=100px;'/>");
    $('#live').html('');
    $('#live').append("<img src='"+aTd[12].innerHTML+"'width=100px;'/>");
    oprovider.value=aTd[13].innerHTML;
    oexpire.value=aTd[14].innerHTML;
}
3.動態添加表格中詳情按鈕，再打開彈框的時候並獲取表格中的所有信息。
代碼如下：

c16.innerHTML = '<button class="btn btn-link" onclick="$(\'#w\').window(\'open\'); modify(this) ">詳情</button>';

 這樣一個詳情顯示框就完成了！