jquery动态实现table的内容改变
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery动态实现table的内容改变相关的知识，希望对你有一定的参考价值。
<td>东方明珠</td>
<td><a href="#" class="up">上移</a> </td>
<td><a href="#" class="down">下移</a></td>
<td><a href="javascrip:;" class=" modify">修改</a></td>
<td><a href="javascrip:;" class="get">删除</a></td>
我希望点击修改的时候弹出一个框，当我点击确定按钮时可以在原来的位置上显示我修改后的内容！
<html>
<head>
<meta charset="UTF-8">
<title>RunJS</title>
<style>
table
margin: 0 auto;
width: 400px;
border-collapse: collapse;
border: 1px solid black;
td,th
border: 1px solid black;
</style>
<script id="jquery_180" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.0.min.js"></script>
<script>
var up = function(dom)
dom.insertBefore(dom.prev());
;
var down = function(dom)
dom.insertAfter(dom.next());
;
var modify = function(dom)
var dc = dom.children("td:first");
var val = prompt("输入新的内容：", dc.text());
if (null != val)
dc.text(val);
;
var get = function(dom)
dom.remove();
;
var arr = [
up, down, modify, get
];
$(function()
$("table").delegate("tr>td>a", "click", function()
var me = $(this),
mp = me.parent("td");
var ind = mp.index();
arr[ind - 1](mp.parent());
);
$(":button[value='新增']").click(function()
var ind = $("table tr").length;
$("table").append('<tr><td>值' + ind + '</td><td><a href="###" class="up">上移</a> </td><td><a href="###" class="down">下移</a></td><td><a href="###" class="modify">修改</a></td><td><a href="###" class="get">删除</a></td></tr>');
);
);
</script>
</head>
<body>
<table>
<caption>模拟数据表格
<input type="button" value="新增" />
</caption>
<tr>
<td>雷峰塔</td>
<td> <a href="###" class="up">
上移
</a>
</td>
<td> <a href="###" class="down">
下移
</a>
</td>
<td> <a href="###" class="modify">
修改
</a>
</td>
<td> <a href="###" class="get">
删除
</a>
</td>
</tr>
<tr>
<td>立交桥</td>
<td> <a href="###" class="up">
上移
</a>
</td>
<td> <a href="###" class="down">
下移
</a>
</td>
<td> <a href="###" class="modify">
修改
</a>
</td>
<td> <a href="###" class="get">
删除
</a>
</td>
</tr>
</table>
</body>
</html> 参考技术A <table id="tb">
<tr>
<td>东方明珠</td>
<td><a href="#" class="up">上移</a> </td>
<td><a href="#" class="down">下移</a></td>
<td><a href="javascrip:;" class=" modify">修改</a></td>
<td><a href="javascrip:;" class="get">删除</a></td>
</tr>
</table>
$( ".modify" ).click( function( e )
var a = prompt( "请输入要修改的内容" ) || "";
if( a.length > 0 )
$( this ).parent().parent().find( "td" ).eq( 0 ).html( a );
);追问
我是好多行这样的数据，我想的是点击哪个替换哪个，用eq我只能固定获取了，有什么解决办法吗？
追答每行的结构是一样的话，是可以通用的。
jquery 实现table的动态合并列
常见的table是一行一列的形式，当有时会遇到后台的数据在前台显示时，
需要显示多对一，eg:
这是后台初始的数据，现在我要显示为：
思路：将第3列的td的rowspan改为为行数，
删除第一行之外的其他行的第三列数据，
jq代码如下：
var num=$(\'table tr\').length;
$(\' tr:not(:first) .row2\').remove();
$(\'.row2\').attr(\'rowspan\',num);
注意点：这里的row2为第3列td的class.
以上是关于jquery动态实现table的内容改变的主要内容，如果未能解决你的问题，请参考以下文章