动态创建表格给同一个标签创建点击事件并让点击事件操作内容不一样

动态创建表格给同一个标签创建点击事件，每个点击事件操作的元素不一样。
现在有这样的需求，点击“查看详细”显示或隐藏标签。要实现这样的效果就要给点击标签添加两个属性，一个属性是name，它的值和隐藏标签的id要一致，还有添加属性show（这个是自定义的），值默认为false，当为true时将标签显示。
效果如下：
这里写图片描述
代码如下（要引入Jquery）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="myjs/jquery-1.9.1.min.js"></script>
    <title>表格测试</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>电话号码</th>
            <th>住址</th>
            <th>上一环节</th>
            <th>上一环节</th>
            <th>备注</th>

            <th width="150px;">操作</th>
        </tr>
        <tr>
            <td>双笙</td>
            <td>18318182223</td>
            <td>东城中心</td>
            <td>客户确认</td>
            <td>热线确认</td>
            <td>确认成功</td>
            <td><a href="#" name="renew1" show=false onclick="change(this);" >查看详细</a></td>
        </tr>
        <tr style="display: none;" id="renew1">
            <td colspan="7">确认结果：成功</td>
        </tr>
        <tr>
            <td>玄觞</td>
            <td>18318188329</td>
            <td>东城中心</td>
            <td>审批</td>
            <td>等待缴费</td>
            <td>办理失败</td>
            <td><a href="#" name="renew2" show=false onclick="change(this);" >查看详细</a></td>
        </tr>
        <tr style="display: none;" id="renew2">
            <td colspan="7">自动办理结果：失败</td>
        </tr>
        <tr>
            <td>冏菌</td>
            <td>18313742251</td>
            <td>东城中心</td>
            <td>客户确认</td>
            <td>热线确认</td>
            <td>确认成功</td>
            <td><a href="#" name="renew3" show=false onclick="change(this);" >查看详细</a></td>
        </tr>
        <tr style="display: none;" id="renew3">
            <td colspan="7">处理结果：失败</td>
        </tr>
        <script type="text/javascript">
            function change(obj) {
                var id = $(obj).attr("name"); 
                var result = $(obj).attr("show"); 
                if (result == "true") {
                    $("#"+id).hide();
                    $(obj).attr("show","false"); 
                } else {
                    $("#"+id).show();
                    $(obj).attr("show","true"); 
                } 
            }
        </script>
</body>
</html>

动态创建表格给同一个标签创建点击事件并让点击事件操作内容不一样

猜你喜欢