一个表格里面有多行数据,可能你有把某一行,上移 ,下移,移到第一移,最后一行的需求.
为了方便,使用Asp.net中的DataGrid来实现表格.
DataGrid代码
<asp:datagrid id=DataGrid1 runat="server" AutoGenerateColumns="False" Width="100%">
<Columns>
<asp:BoundColumn DataField="ID" HeaderText="ID"></asp:BoundColumn>
<asp:BoundColumn DataField="Email" HeaderText="Email"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="操作">
<ItemTemplate>
<INPUT type=button value=First onclick="Move_first(this)">
<INPUT type=button value=Up onclick="Move_up(this)">
<INPUT type=button value=Down onclick="Move_down(this)">
<INPUT type=button value=Last onclick="Move_last(this)">
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>
JavaScript代码
<script language=javascript>
function Move_up(src)
{
var rowIndex=src.parentElement.parentElement.rowIndex;
if (rowIndex>=2)
change_row(rowIndex-1,rowIndex);
}
function Move_down(src)
{
var rowIndex=src.parentElement.parentElement.rowIndex;
var tl = document.getElementById("DataGrid1");
if (rowIndex<tl.rows.length-1)
change_row(rowIndex+1,rowIndex);
}
function Move_first(src)
{
change_row(1,src.parentElement.parentElement.rowIndex);
}
function Move_last(src)
{
var tl = document.getElementById("DataGrid1");
change_row(tl.rows.length-1,src.parentElement.parentElement.rowIndex);
}
function change_row(line1,line2)
{
var tl = document.getElementById("DataGrid1");
tl.rows[line1].swapNode(tl.rows[line2]);
}
</script>
后台读取数据,填充到DataGrid省略.
实际上在表格里面交换两行非常容易.
var tl = document.getElementById("DataGrid1");
tl.rows[line1].swapNode(tl.rows[line2]);
DataGrid1是要交换的表名,line1,line2是要交换的两行的行索引,从0开始计数.
swapNode交换的方法.
src.parentElement.parentElement.rowIndex是得到按钮所在行的行索引,
因为按钮的父结点是<td>,<td>的父结点才是<tr>也就是行,所以用了两次parentElement.
if (rowIndex>=2) 因为表头不参予交换,所以这里面是>=2,如果没有表头,或者表头也要参予交换,
则改写为>=1.
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述