table操作

最新推荐文章于 2023-09-10 22:16:54 发布
最新推荐文章于 2023-09-10 22:16:54 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： 常用 Jquery 文章标签： checkbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pangchengyong0724/article/details/52692113
版权

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="topmenu_keleyi_com"><ul><li><a href="http://www.keleyi.com/menu/net/" target="_blank">.NET</a></li><li><a href="http://www.keleyi.com/menu/javascript/" target="_blank">Javascript</a></li><li><a href="http://www.keleyi.com/menu/jquery/" target="_blank">jQuery</a></li><li><a href="http://www.keleyi.com/menu/csharp/" target="_blank">C#</a></li><li><a href="http://www.keleyi.com/menu/other/" target="_blank">其他</a></li><li><a href="http://www.keleyi.com/" target="_blank">首页</a></li></ul></div>
<div style="background-color:#959822; width:100%;height:150px;">请滚动鼠标使页面向下</div>
<div style="background-color:Green; width:100%;height:150px;">www.keleyi.com</div>
<div style="background-color:Red; width:100%;height:150px;">欢迎</div>
<div style="background-color:Yellow; width:100%;height:150px;">hi</div>
<div style="background-color:Silver; width:100%;height:150px;">柯乐义</div>
<div style="background-color:Aqua; width:100%;height:150px;">keleyi.com</div>
<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>
<div style="background-color:Green; width:100%;height:150px;">keleyi.com</div>
<div style="background-color:Blue; width:100%;height:150px;">柯乐义</div>
<div style="background-color:Olive; width:100%;height:150px;">柯乐义 监视下滚像素</div>
<div style="background-color:Green; width:100%;height:150px;">A</div>
<div style="background-color:Purple; width:100%;height:150px;">jquery</div>
<div style="background-color:Green; width:100%;height:150px;"><a href="http://www.keleyi.com/a/bjac/f4a6f78d74a251c5.htm" target="_blank">原文</a></div>
<div style="background-color:Lime; width:100%;height:150px;">keleyi.com</div>
<div style="background-color:Orange; width:100%;height:150px;">完整代码</div>
<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>
执着更专业
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
Jquery Table 操作
05-09
Jquery Table 操作，上移，下移，删除 效果图：http://blog.csdn.net/a497785609/article/details/8906836
element中table操作按钮展示与折叠的实现
Mybells
11-25 8482
element UI中table操作按钮展示与折叠的实现
element UI中table操作栏更多按钮展示与折叠的实现
皮皮的博客
04-21 1万+
Element UI中table操作栏更多按钮展示与折叠的实现 1、然后给大家看下动态图 2、解决思路： ​ 一开始我的第一反应就是可以手写一个定位布局来点击弹出更多按钮弹框，后面看了下elementUI文档上有个组件可以利用，那就是Popover 弹出框 废话不多说，直接上代码吧 html代码块： <el-table :data="locationList" v-loading="loading" border class="table" ref="multipleTable" @selectio
Mysql 常见ALTER TABLE操作
专注基础架构领域
01-14 1万+
删除列 alter table table_name drop col_name; 增加列(单列) alter table table_name add col_name col_type comment 'xxx'; 增加列(多列) alter table table_name add col_name col_type comment 'xxx', add col_name col_type(col_length) comment 'xxx'; 增加表字段并指明字段放置为第一列 alter
MySql 杂记 之OPTIMIZE TABLE操作
weixin_38597669的博客
02-24 8932
MySQL官方建议不要经常(每小时或每天)进行碎片整理，一般根据实际情况，只需要每周或者每月整理一次即可，可以写成定时任务来做，这是因为3在OPTIMIZE TABLE运行过程中，MySQL会锁定表，其本质是将当前表复制到临时表操作后再删除当前表，最后将临时表改名
动态设置el-table操作列的宽度自适应
宁静致远
11-05 1万+
el-table动态操作列宽度自适应设置
layui-table操作列绑定事件的方法
热门推荐
张音乐的博客
08-07 2万+
1、html准备 <div> <table id="demo" lay-filter="test"></table> </div> 2、js渲染 <script src="${pageContext.request.contextPath }/layui/layui.js"></script> <s...
el-table操作列动态自适应设置（根据操作项个数动态设置宽度）
最新发布
宁静致远
09-10 3526
el-table根据操作项个数，动态设置操作列的宽度
mysql的optimize table操作
技术之旅：一位项目管理者的编程视角与项目管理洞见；
08-06 4745
delete from table_name 清除了数据，同时数据表的空间也会变为0。 这就存在了一个问题，在网站的实际运行过程中。经常会存在这样的附带条件删除数据的操作行为。天长日久，这不就在数据库中浪费了很多的空间吗。这个时候我们该使用 OPTIMIZE TABLE 指令对表进行优化了。 如何使用 OPTIMIZE 以及在什么时候该使用 OPTIMIZE 指令呢看 命令语法：OPTIMIZE ...
layUI table操作列中tips使用
a5252145的博客
07-03 9679
layUI table操作列中tips使用 有时候table表格渲染时，对于操作列的按钮特别长时，需要提示信息tips。 第一步： table.render({ cols: [[ //表头 {fixed: 'right',title: '操作', width:200, align:'center', toolbar: '#operation'} //这里的toolbar...
layui table的使用及操作
艾小逗
04-30 1万+
layui table表格的使用方法及基本操作 包含： 开启复选框（获取选中数据），checkbox 表格的重载，reload 表格数据的操作 需要引入layui.css / jquery.js / layui.js <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti...
bootstrap table操作技巧分享
08-31
主要为大家分享了bootstrap table操作技巧，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
11-29
在使用JqGrid时，Table中最后一列是操作列，在操作列中每一行都一个操作按钮，该操作按钮类似下拉菜单，如下图： 在点击Table中【操作】一列时需要弹出一个Div层，该Div层中包含一堆按钮，用于对Table行进行操作，...
javascript 实现简单的table排序及table操作练习
10-27
在这个列子中，练习了table的操作，主要有：tBodies、rows、cells，还有有关数组的排序方法：sort,按兴趣的朋友可以研究下
jquery 数组合并
天下无敌庞成勇
11-14 1万+
// 第一种 var mergeTo = [4,5,6], var mergeFrom = [7,8,9]; mergeTo = mergeTo.concat(mergeFrom); console.log(mergeTo); // is: [4, 5, 6, 7, 8, 9] or var a = [1,2], b = [3,4], c = a.concat(b); con
操纵DOM之--DOM元素的【增删查改】
天下无敌庞成勇
11-16 880
修改元素内容有如下3个方法可以用于获取HTML元素的内容 text()：设置或返回所选元素的文本内容。 html()：设置或返回所选元素的内容（包括HTML 标记）。 val()：设置或返回表单字段的值。区别： text和html的明显区别是text只返回元素的文本内容 html返回的是将HTML解析后的内容。 val返回的是表单的内容获取或设置元素内容示例HTML代码<htm
jQuery的事件处理
天下无敌庞成勇
11-16 629
jQuery也扩展了JavaScript的事件处理机制，不仅提供了更加简洁的处理语法，同时也具有更好的兼容性，这使得开发人员使用jQuery的事件处理后，就不用担心各种不同浏览器之间的兼容性了。 $(document).ready(function)：将函数绑定到文档的就绪事件（当文档完成加载时）。 $(选择器).click(function)：触发或将函数绑定到被选元素的点击事件。
checkbox 操作【全选 获取选中的值】
天下无敌庞成勇
09-28 588
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale
在Oracle中，truncate table操作和drop table操作在效率上有区别吗
07-12
- TRUNCATE TABLE操作通常比DROP TABLE操作更快。TRUNCATE TABLE是一种快速删除表中数据的方式，它通过释放表空间来实现删除。它不会写入事务日志，并且不会激活触发器。这使得TRUNCATE TABLE比DELETE或DROP TABLE...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值