jquery 表格控件怎么使用

Posted 2023-04-06

　　1、使用简单、扩展方便。
　　2、表格样式可自定义，只需修改相应的CSS样式即可。
　　3、支持行点击事件自定义。
　　4、支持复选框选择行。
　　5、执行列排序（支持数字、日期时间、英文、汉字等）。
　　6、支持自定义行按钮及按钮事件（如编辑、删除按钮等）
　　7、支持自定义数据的显示样式（根据当前数据或当前行数据）
　　8、支持分页显示数据，且在插件内部实现分页处理。
　　二、使用说明
　　该插件的使用，基本只需两个步骤即可，一个是表格的声明（创建），然后就是数据的加载。
　　1、表格的声明（创建）
　　var objTable = new HyTable(
　　columns: [
　　name: '姓名', mapping: 'username', type: 'string', width: '100', allowSort: true, renderer: function(val)return val;
　　], //(array)列信息
　　emptyMsg: "暂无数据", //(string)无数据时的提示信息
　　renderTo: "", //(string)表格容器，必须是html元素的ID属性值
　　model: 'remote', //(string)模式，远程(remote)or本地(local)
　　url: '', //(string)远程模式的获取数据的url地址
　　allowPaging: true, (bool)//是否分页
　　pageSize: 20, //(int)每页显示的行数
　　checkSelected: false, //(bool)复选框选择
　　selectedField: "", //(string)复选框选中字段
　　stripeRows: false, //(bool)是否启用隔行变色 默认不启用
　　onRowClick: null //(function)行点击事件
　　);
　　2、表格数据的加载
　　objTable.loadData(1,data);//第一个参数为加载页的页索引，第二个参数有两种情况，1：如果参数内容是JSON对象，则表示是查询的查询条件，如果是数据，则表示直接加载本地数据到表格中。 参考技术A $.fn.youfunction = function(event)

参考技术B 看看你用的是什么插件吧，百度一下应该都可以找到这个插件的API文档。或者看看Demo也可以呀！

jquery有选择性的增加和删除表格

删除
额。。。第一次发，这个提问的工具还搞不来，下面增加下我的要求。

就是页面上有三张不同的表格。之后有一个可选择的下拉菜单，里面分别是这三张表格的名称，你可以选择任意的表格名称，选中之后，点击增加的按钮，你选中的这张表格就在页面上显示了。点击删除之后，你刚才所增加的表格就删除了。注意，是整张表格，而不是一行。谢啦~

不懂太你的描述~

页面上面的三张表格是隐藏的？
点击增加按钮的时候，是把隐藏的表格显示？
点击删除按钮的时候，是把显示的表格隐藏？

补充：

以下为页面控件概述：
三个表格控件：
<table id="table1"></table>
<table id="table2"></table>
<table id="table3"></table>
一个下拉菜单控件：
<select id="select1"></select>
一个增加按钮：
<input type="button" id="btnAdd" />
一个删除按钮：
<input type="button" id="btnDelete" />

以下为js代码：
$(function ()
var $select1 = $("#select1");
var $tempTables = $(); //用于缓存table

//为select增加所有table列表
$("table").each(function ()
var id = $(this).attr("id");
$select1.append($("<option></option>").val(id).text(id));
);

//为增加按钮绑定事件
$("#btnAdd").click(function ()
//克隆选择的table，并去除id
var cloneTable = $("#" + $select1.val()).clone().removeAttr("id");
//加入页面中
$("body").append(cloneTable);
//加入缓存中
$tempTables = $tempTables.add(cloneTable);
);

//为删除按钮绑定事件
$("#btnDelete").click(function ()
//移除所有新增的table
$tempTables.remove();
//重置缓存
$tempTables = $();
);
);

代码纯手打~没测试过~有问题你给我说~应该没问题~

希望对您有帮助~
By Billskate追问

恩，你的代码大部分都没有问题，但是，我想要原先的表格是隐藏的也。

追答

哦 关于html标签我只写了跟js操作相关的属性
其他需要您自己去添加
比如table的隐藏，设置样式为display:none就好了

参考技术A <input type="button" value="add table" id="btnAdd" /><input type="button" value="delete table" id="btnDel" /><select id="sel">
<option value="3|5">三行五列</option>
<option value="4|4">四行四列</option>
<option value="5|3">五行三列</option>
</select><div id="content" style=""></div>--------------------------------------------
function addTable(str)
var arr = str.split("|");
var $table = $("<table width='180px' height='120px' border=1></table>");
$table.attr("name",str);
for(var i=0;i<arr[0];i++)
var $tr = $("<tr></tr>");
for(var j=0;j<arr[1];j++)
$("<td></td>").appendTo($tr);

$tr.appendTo($table);

$table.appendTo($("#content"));


$("#btnAdd").click(function()
addTable($("#sel option:selected").val());
)

$("#btnDel").click(function()
$("#content table[name='"+$("#sel option:selected").val()+"']").remove();
); 参考技术B 围观学习。