详情显示框——当点击详情按钮的时候将所有隐藏信息以弹框的形式显示出来

适用条件：当表格中的信息过多的时候，将部分信息隐藏，只有当点击详情按钮的时候将所有信息以弹框的的形式表示出来。

适用的技术：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>';

 这样一个详情显示框就完成了！