table操作
来源：互联网 发布：java swing怎么用 编辑：程序博客网 时间：2024/06/04 23:25
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
- Table操作
- table 操作
- table操作
- jquery操作table操作
- javascript操作table
- JavaScript操作table
- 动态操作html table
- javascript操作table
- C# table控件操作
- JAVASCRIPT 操作HTML TABLE
- JS 操作 Table
- c# Pivot Table 操作
- DOM操作table
- 临时表操作(# table)
- WEBFOCUS TABLE JOIN操作
- JS操作table
- jquery动态操作table
- javascript 操作table
- CSRF的攻击与防御
- 使用git（三）远程操作
- 1.求解N以内素数
- 8CollapsingToolbarLayout源码分析
- mysql添加外键
- table操作
- 高德地图POI搜索，附近地图搜索，类似附近的人搜索
- OpenCV3.1 + Python2.7 error "DLL load failed: The specified module could not be found"
- oracle数据库Profile设置及audit异常账户
- swift中UITextField的使用
- leetcode 89 Gray Code
- 3-1 Point类的构造函数
- codevs2845 排序的代价
- 微信小程序开发环境搭建
