您现在的位置：首页 >> 前端 >> 内容

html开发中table操作技巧

时间：2017/11/16 20:00:59 点击：

　　核心提示：tr 点击变色!--tr 点击变色 --script src=../static/jquery-1.8.3.min.js/scriptstyle type=text/css.selected{back...

tr 点击变色

<!--tr 点击变色 -->
<script src="../static/jquery-1.8.3.min.js"></script>
<style type="text/css">
    .selected{
        background: red;
    }
</style>

<table>
    <thead>
    <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
    </thead>
    <tbody>
    <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
    </tbody>
</table>

<script>
$(function () {
    $('tbody>tr').click(function () {
        $(this).addClass('selected') //为选中项添加高亮
            .siblings().removeClass('selected')//去除其他项的高亮形式
            .end();
    });
});
</script>

在尾部和头部追加tr

<script src="../static/jquery-1.8.3.min.js"></script>

<table id = "test" border="1">
    <thead>
        <tr><th>列1</th><th>列2</th><th>列3</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>1</td><td>2</td></tr>
        <tr><td>2</td><td>4</td><td>5</td></tr>
    </tbody>
</table>

<input type="button" id="btn1" value="在开头增加">
<input type="button" id="btn2" value="在末尾增加">

<script>
$(function(){

    $("#btn1").click(function() {
        $("#test tbody").prepend('<tr><td>头部</td><td>头部</td><td>头部</td></tr>');
    });

    $("#btn2").click(function() {
        $("#test tbody").append('<tr><td>尾部</td><td>尾部</td><td>尾部</td></tr>');
    });
});
</script>

点击 tr 删除tr

<script src="../static/jquery-1.8.3.min.js"></script>

<table border="" id = "test">
    <tr><td>1</td><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>2</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>3</td><td>7</td><td>8</td><td>9</td></tr>
    <tr><td>4</td><td>1</td><td>2</td><td>3</td></tr>
</table>

<script>
$(function(){
    $("table#test tr").click(function() {
        $(this).remove();
    });
});
</script>

tr 追加和删除 小demo

<script src="../static/jquery-1.8.3.min.js"></script>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr align="center">
        <td>广告名称</td>
        <td>广告图片</td>
        <td>广告内容</td>
        <td>广告来源</td>
        <td>广告作者</td>
        <td>广告描述</td>
        <td align="center"><a href="#" id="getAtr">追加内容</a></td>
    </tr>
    <tbody id="addTr">
    <tr align="center">
        <td><input type="text" name="advTitle[]"/></td>
        <td><input type="file" name="img[]" /></td>
        <td><input type="text" name="advContent[]" /></td>
        <td><input type="text" name="advSource[]" /></td>
        <td><input type="text" name="advAuthor[]" /></td>
        <td><input type="text" name="advPosition[]" /></td>
        <td></td>
    </tr>
    </tbody>
    <tr align="center">
        <td colspan="5"><input type="submit" value="全部添加" /></td>
    </tr>
</table>
<script>
    $(function(){
        $("#getAtr").click(function(){
            $str='';
            $str+="<tr align='center'>";
            $str+="<td><input type='text' name='advTitle[]'/></td>";
            $str+="<td><input type='file' name='img[]' /></td>";
            $str+="<td><input type='text' name='advContent[]' /></td>";
            $str+="<td><input type='text' name='advSource[]' /></td>";
            $str+="<td><input type='text' name='advAuthor[]' /></td>";
            $str+="<td><input type='text' name='advPosition[]' /></td>";
            $str+="<td onClick='getDel(this)'><a href='#'>删除追加</a></td>";
            $str+="</tr>";
            $("#addTr").append($str);
        });
    });

    function getDel(k){
        $(k).parent().remove();
    }
</script>

监视滚动像素，显示或隐藏顶部导航条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.keleyi.com/1999/xhtml">
<head>
    <title>监视滚动像素，显示或隐藏顶部导航条-柯乐义</title>
    <style type="text/css">
        #topmenu_keleyi_com{position:fixed;top:0px;left:0px;right:0px;width:800px;margin-left:auto;margin-right:auto;height:50px;background-color:transparent;display:none;}
        #topmenu_keleyi_com li{float:left;
            list-style:none;
            margin-right:1px;
            width:116px;
            background-color:#e0f0e0;
        }
        #topmenu_keleyi_com ul{ margin:0px;padding:0px;}
        body{margin:0px;}
    </style>
    <script src="../static/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="https://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
</head>
<body>
<p id="topmenu_keleyi_com"><ul><li><a href="https://www.keleyi.com/menu/net/" target="_blank">.NET</a></li><li><a href="https://www.keleyi.com/menu/javascript/" target="_blank">Java/" target="_blank">Javascript</a></li><li><a href="https://www.keleyi.com/menu/jquery/" target="_blank">jQuery</a></li><li><a href="https://www.keleyi.com/menu/csharp/" target="_blank">C#</a></li><li><a href="https://www.keleyi.com/menu/other/" target="_blank">其他</a></li><li><a href="https://www.keleyi.com/" target="_blank">首页</a></li></ul></p>
<p>请滚动鼠标使页面向下</p>
<p>www.keleyi.com</p>
<p>欢迎</p>
<p>hi</p>
<p>柯乐义</p>
<p>keleyi.com</p>
<p>keleyi</p>
<p>keleyi.com</p>
<p>柯乐义</p>
<p>柯乐义 监视下滚像素</p>
<p>A</p>
<p>jquery</p>
<p><a href="https://www.keleyi.com/a/bjac/f4a6f78d74a251c5.htm" target="_blank">原文</a></p>
<p>keleyi.com</p>
<p>完整代码</p>
<script type="text/javascript">
    $(function () {
        //当滚动条的位置处于距顶部200像素以下时，顶部导航出现，否则消失
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 200) {
                    $("#topmenu_keleyi_com").fadeIn(100);
                }else {
                    $("#topmenu_keleyi_com").fadeOut(100);
                }
            });
        });
    });
</script>
</body>
</html>

tr 上移 下移

<html>
<head>
    <title></title>
    <style type="text/css" >
        table { background:#949494; width:400px; line-height:20px;}
        td { border-right:1px solid gray; border-bottom:1px solid gray; }
    </style>
    <script src="../static/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" >
        function up(obj) {
            var objParentTR = $(obj).parent().parent();
            var prevTR = objParentTR.prev();
            if (prevTR.length > 0) {
                prevTR.insertAfter(objParentTR);
            }
        }
        function down(obj) {
            var objParentTR = $(obj).parent().parent();
            var nextTR = objParentTR.next();
            if (nextTR.length > 0) {
                nextTR.insertBefore(objParentTR);
            }
        }
    </script>
</head>
<body>
<table border="0" >
    <tr><td>1</td><td>12</td><td>13</td><td><a href="#" onclick="up(this)">上移</a>  <a href="#" onclick="down(this)">下移</a></td></tr>
    <tr><td>2</td><td>22</td><td>23</td><td><a href="#" onclick="up(this)">上移</a>  <a href="#" onclick="down(this)">下移</a></td></tr>
    <tr><td>3</td><td>32</td><td>33</td><td><a href="#" onclick="up(this)">上移</a>  <a href="#" onclick="down(this)">下移</a></td></tr>
    <tr><td>4</td><td>42</td><td>43</td><td><a href="#" onclick="up(this)">上移</a>  <a href="#" onclick="down(this)">下移</a></td></tr>
    <tr><td>5</td><td>52</td><td>53</td><td><a href="#" onclick="up(this)">上移</a>  <a href="#" onclick="down(this)">下移</a></td></tr>
</table>
</body>
</html>

Tags:HT TM ML L开 
作者：网络　来源：庞成勇的博客 天下无
  • 上一篇：ES6学习笔记（六）函数与对象解析
  • 下一篇：DynamicsCRM2016WebAPI获取实体元数据Picklist属性的Text&Value

    • 您可能感兴趣的文章

    相关评论

    发表我的评论

    • 大名：
    • 内容：