var rowId=1;
//添加行
function addRow()
{
//因为表格每行都有一些效果,不得不处理下id,和其他没有关系
rowId++;
var replaceString=$("#lb tr:first-child").html().replace("value=tr1","value=tr"+rowId).replace("rowId=\"1\"","rowId=\""+rowId+"\"").replace("id=jstj_sdjs1","id=jstj_sdjs"+rowId).replace("id=jstj_zdjs1","id=jstj_zdjs"+rowId).replace("id=jsgs_sdjs1","id=jsgs_sdjs"+rowId).replace("id=jsgs_zdjs1","id=jsgs_zdjs"+rowId);
var rowTemplet="<tr onMouseOver='changeto()' onMouseOut='changeback()' id='tr"+rowId+"'>"+replaceString+"</tr>";
$("#lb tr:last-child").after(rowTemplet);
}
//删除行
function delRow()
{
if($("#lb tr").length<=1 || $("input[type='checkbox'][checked]").length==$("#lb tr").length)
{
alert('至少保留一行');
return;
}
$("input[type='checkbox'][checked]").each(
function(){
$("#"+$(this).val()).remove(); //此处可以修改成 $(this).parent().parent().remove(); 使得 和id没有任何关系
});
}
//上移行
function upOrDownTr(isUp)
{
if(isUp){
$("input[type='checkbox'][checked]").each(
function(){
var checkedTR=$(this).parent().parent();
var upTR=checkedTR.prev();
if(upTR.html()==null)
{
alert("已是第一行");
return;
}
checkedTR.insertBefore(upTR);
$(this).attr("checked",true);
});
}
else
{
var reverseChecked= jQuery.makeArray($("input[type='checkbox'][checked]")).reverse();
$.each(reverseChecked,function(i,v){
var checkedTR=$(this).parent().parent();
var upTR=checkedTR.next();
if(upTR.html()==null)
{
alert("已是最后一行");
return;
}
checkedTR.insertAfter(upTR);
$(this).attr("checked",true);
});
}
}
分享到:
相关推荐
接下来,我们编写jQuery脚本来实现行的移动: ```javascript $(document).ready(function() { // 上移行的事件处理 $("#myTable").on("click", ".up", function() { var row = $(this).closest("tr"); if (row....
本教程将深入探讨如何使用jQuery实现一个可编辑的表格功能,这在数据展示和用户交互中非常常见。 首先,我们需要理解表格(Table)的基础结构。HTML中的`<table>`元素用于创建表格,`<tr>`表示行,`<th>`表示表头...
// 移动表格,使其顶部行变为下一行 tbody.animate({ scrollTop: $(rows[currentRow]).position().top }, scrollSpeed, function() { setTimeout(function() { currentRow++; scrollTable(); }, pauseTime); ...
在JavaScript原生开发中,实现表格(Table)行的拖动排序是一项常见的需求,尤其是在创建交互性强的数据展示页面时。这个功能允许用户通过鼠标拖动来改变表格中行的顺序,提升用户体验。以下是一个详细的知识点说明...
本主题聚焦于“jquery可编辑表格”,这是一个实用的功能,常用于数据管理和用户输入场景,如在线表单、数据库前端展示等。在jQuery的帮助下,我们可以轻松创建动态、交互性强的表格,让用户可以直接在表格中进行编辑...
在本文中,我们将探讨如何实现JS组件Bootstrap Table的表格多行拖拽效果。这是一个常见的需求,特别是在需要用户交互和自定义排序的Web应用中。Bootstrap Table是一个强大的表格插件,它提供了许多内置功能,包括...
为了解决这个问题,我们可以利用JavaScript(js)来实现表格部分固定的特性,保持横向标题行和纵向标题列在页面滚动时始终可见。以下是一些关键知识点和实现步骤: 1. **固定表头(Fixed Header)** - 使用CSS定位...
3.15 为表格行增加单击事件 3.16 用回车键模拟Tab键 第4章 jQuery操作CSS样式 4.1 使用addClass()函数动态添加样式类 4.2 使用removeClass()函数动态移除样式类 4.3 使用toggleClass()函数切换页面元素的样式...
表格由`<table>`元素定义,内部包含`<tr>`(表格行)、`<td>`(表格数据单元格)以及可选的`<th>`(表头单元格)。要实现行高的动态调整,我们需要选定可以被拖动的元素,通常是表格行`<tr>`。 接下来,我们需要...
综上所述,Flexigrid作为一个强大的jQuery插件,提供了丰富的表格操作功能,包括行移动、行选中事件处理、行删除、DWR支持以及灵活的数据获取方式,使得在Web应用中构建交互性强且功能丰富的表格变得更加容易。...
2. **FrozenColumns**:这是另一款专为表格固定列设计的jQuery插件,它同样能够实现横纵坐标的固定。 通过上述两种方法,开发者可以根据项目需求选择合适的方案实现`JSP`中的表头固定。在实际应用中,还需考虑兼容...
Bootstable是一款基于jQuery和Bootstrap框架的表格编辑插件,它为网页中的数据表格提供了丰富的交互功能,使得用户可以在表格内直接进行数据的编辑、增删查改操作,极大地提升了用户体验和工作效率。在Web开发中,...
标题中的“懒人原生纯css实现多行文字均保持垂直居中效果”是指一种无需依赖JavaScript库(如jQuery)或HTML5特定属性,仅通过CSS实现的多行文本垂直居中的技术。这种技术在网页设计中十分常见,因为用户界面的对齐...
jQuery Mobile 是一个流行的前端开发框架,专为移动设备设计,提供了丰富的交互元素和美观的界面。在移动应用或响应式网站中,表单是必不可少的组成部分,用于收集用户输入的数据。jQuery Mobile 提供了专门针对移动...
6.1.6 多行表格 6.1.7 不相等的表格 6.1.8 springboard 6.2 可折叠的内容块 6.3 可折叠的设置 6.4 使用css渐变进行样式化 6.5 总结 第7章 创建可主题化的设计 7.1 主题基础知识 7.2 ...
3. **表格布局**:使用`display`属性可以调整表格布局,如`display: table`保持默认表格布局,`display: block`可使表格按块级元素显示,`display: flex`或`grid`则可以实现更灵活的网格布局。 4. **表格边框合并**...
- **多选与操作**:提供多行选择功能,同时支持行级别的操作按钮,如删除、更新等。 - **导入导出**:可以将数据导入或导出为CSV、Excel、XML、JSON等多种格式。 - **国际化**:支持多种语言,便于全球化应用开发...
4. **交互性**:Tabulator支持多种交互功能,如可编辑单元格、行拖放、选择多行、弹出菜单等,提升了用户体验。用户可以直接在表格内进行数据编辑,并且这些更改可以实时保存回数据源。 5. **富文本和自定义组件**...
7. **扩展性**:AmazeUI表格具有良好的扩展性,可以与Ajax、jQuery插件等结合,实现动态加载、异步操作等功能。 8. **样式定制**:AmazeUI提供了丰富的预设样式,同时允许开发者根据需求自定义表格样式,满足个性化...