JQ完成表格单元格顺序的上移下调
如有指教及疑问,欢迎留言
HTML代码
<table class="exampletable">
<thead>
<tr>
<th>单元格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="name" value="单元格一" /></td>
<td>
<button>上移</button>
<button>下降</button>
</td>
</tr>
<tr>
<td><input type="text" name="name" value="单元格二" /></td>
<td>
<button>上移</button>
<button>下降</button>
</td>
</tr>
<tr>
<td><input type="text" name="name" value="单元格三" /></td>
<td>
<button>上移</button>
<button>下降</button>
</td>
</tr>
</tbody>
</table>
JQ代码
$(".exampletable tbody").on('click', 'button', function () {
var $tr = $(this).closest('tr');
if ($(this).text()=="上移") {
$tr.prev().before($tr);
} else {
$tr.next().after($tr);
}
});
此代码没有考虑首单元格不能上移及尾单元格不能下调的问题.
ps(纯凑字数):菜鸟一枚,今天专门为了这个问题搜了一会,发现,简单的问题往往被写的很复杂,代码本来就是追求简洁明了,不需要绕弯子,为何只需要举个简单的列子,加一些代码说明就可以解决的问题,却是在开篇的时候就用大堆的代码显示自己的厉害!以此为戒,今后的学习和笔记,力求简洁的代码,清晰地思路(均在能力之内)!
JQ完成表格单元格顺序的上移下调的更多相关文章
- JQuery合并表格单元格
转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格 一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格, ...
- 关于.net Microsoft.Office.Interop.Word组建操作word的问题,如何控制word表格单元格内部段落的样式。
控制word表格单元格内部文字样式.我要将数据导出到word当中,对于word表格一个单元格中的一段文字,要设置不同的样式,比如第一行文字作为标题要居中,加粗,第二行为正常的正文. 代码如下 publ ...
- JavaScript动态改变表格单元格内容的方法
本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...
- EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字
EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字 Function 求数字和字母(对象 As String) '在文本与数字混杂中提取数字和字母 Dim myReg ...
- VBA表格单元格替换文字
Sub 表格单元格替换文字() If MsgBox("确定要替换单元格的文字吗?", vbYesNo + vbQuestion) = vbYes Then To ActiveDoc ...
- 关于html表格单元格宽度的计算规则
* { margin: 0; padding: 0 } body { background: #fafafa } ul,li { list-style: none } h1 { margin: 20p ...
- colgroup中col定义表格单元格宽度
colgroup中可以使用col来定义表格单元格宽度,可以使用像素(数字),百分比,我们来具体看看有什么不同. 先看一个最基本的:用像素(数字)表示,因为table有个宽度,这里表示占比 <ht ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- html如何设置表格单元格内容垂直居中?
父元素设置为表格的单元格元素td,而在表格单元格中的元素设置vertical-align: middle; 对父容器(td)使用:display: table-cell 其内子元素使用:vertica ...
随机推荐
- flume 配置
[root@dtpweb data]#tar -zxvf apache-flume-1.7.0-bin.tar.gz[root@dtpweb conf]# cp flume-env.sh.templa ...
- Virtualbox虚拟机配置CentOS7.0静态网络
1.首先在Virtualbox下将网络设置为Bridged Adapter,此项设置可以使本机与虚拟机进行互访,而NAT模式只能进行单项访问: 2.先切换到root,配置网卡信息需要用到root,然后 ...
- 代码回滚:git reset、git checkout和git revert区别和联系
git reset.git checkout和git revert是你的Git工具箱中最有用的一些命令.它们都用来撤销代码仓库中的某些更改,而前两个命令不仅可以作用于提交,还可以作用于特定文件. 因为 ...
- c++的重载运算符
c++中允许重载运算符: 这是我辛苦的结果 #include"iostream"using namespace std;class aaa{ int x;public: aaa() ...
- c#:如何处理对对象进行深度拷贝
/// <summary> /// 对对象进行深度拷贝 /// </summary> /// <param name="obj"></pa ...
- 第一部分:连接MYSQL数据库代码
<?php $connec=mysql_connect("localhost","root","root") or die(" ...
- OO Design
什么是设计原则? 设计原则是基本的工具,应用这些规则可以使你的代码更加灵活.更容易维护.更容易扩展.基本原则:封装变化Encapsulate what varies.面向接口变成而不是实现 Code ...
- Delphi XE5-XE8 以上 如何发布文件到工程中
首发在 ① FireMonkey[DELPHI XE5] 165232328 欢迎使用 FMX 开发手机程序的高手来访. (* *********************************** ...
- Android: 实例解析Activity生命周期
Activity生命周期图: 下面以一个实例来解析,实例APP运行,进入MainActivity, 点击Send Button以后进入MessgaeActivity 当第一次运行App,进入MainA ...
- python之haproxy配置文件操作(第三天)
作业: 对haproxy配置文件进行操作 要求: 对haproxy配置文件中backend下的server实现增删改查的功能 一.这个程序有二个版本 1. python2.7版本见haproxy_py ...