html中实现点击表格某一行后在其下面弹出一行表格

如图：我想点击表格任意一行的IP地址后,下面就会弹出预先设置好的一行；注意：1、我随机点击表格的某一行，它会在点击的这一行下面出现，而表格其它地方没有变化2、点击页面除了... 如图：我想点击表格任意一行的IP地址后,下面就会弹出预先设置好的一行；
注意：
1、我随机点击表格的某一行，它会在点击的这一行下面出现，而表格其它地方没有变化
2、点击页面除了这一行的其它位置时，这显示出来的一行又隐藏起来
求高手，最好附带代码说明展开

 我来答

1个回答

#合辑# 机票是越早买越便宜吗？

昂子帆6I
推荐于2017-12-15 · TA获得超过6065个赞

知道大有可为答主

回答量：7904

采纳率：55%

帮助的人：1262万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css">
*{margin:0;padding:0;}
table { border-collapse: collapse; border-spacing: 0 }
table td{border:1px solid #ccc; height:30px; line-height:30px;text-align:center;position:relative;}
table td p{}
table td .box{width:300px;height:300px;background:#f00; position:absolute;top:30px;left:0;z-index:9999;display:none;}
</style>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('table tr').each(function(){
            $(this).find('td:first').click(function(){
                $(this).children('.box').show();    
            });
        });
        $(document).click(function(e){
            var target = $(e.target);
            if(target.closest("table tr").length == 0){
                $(".box").hide();
            }
        });
    })
</script>
</head>

<body>
<table width="900" border="1">
    <tr>
        <td>
            <p>IP</p>
            <div class="box">点击的时候出现</div>
        </td>
        <td>ICON</td>
        <td>FPING</td>
        <td>...</td>
    </tr>
    <tr>
        <td>
            <p>IP</p>
            <div class="box">点击的时候出现</div>
        </td>
        <td>ICON</td>
        <td>FPING</td>
        <td>...</td>
    </tr>
    <tr>
        <td>
            <p>IP</p>
            <div class="box">点击的时候出现</div>
        </td>
        <td>ICON</td>
        <td>FPING</td>
        <td>...</td>
    </tr>
</table>

</body>
</html>
jquery库文件自己引入下，希望可以帮到你。

追问

感谢，能不能帮我改一下，现在这个点击后出现的box会覆盖下一行表格的内容，能不能改成就想点击一行后在其下面插入一行2列的表格跟图片显示的效果一样；我给你加100分了……

追答

*{margin:0;padding:0;}
table { border-collapse: collapse; border-spacing: 0 }
table td{border:1px solid #ccc; height:30px; line-height:30px;text-align:center;}
table .box{width:900px;height:30px;background:#eee;display:none;}
<script type="text/javascript">
    $(function(){
        $('table tr').each(function(){
            $(this).find('td:first').click(function(){
                $(this).parent('tr').next('.box').show();    
            });
        });
        $(document).click(function(e){
            var target = $(e.target);
            if(target.closest("table tr").length == 0){
                $(".box").hide();
            }
        });
    })
</script>
<table width="900" border="1">
    <tr><td>IP</td><td>ICON</td><td>FPING</td><td>...</td></tr>
    <tr class="box"><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>IP</td><td>ICON</td><td>FPING</td><td>...</td></tr>
    <tr class="box"><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
字数超出最大值了，我只能这样写，理解下。