JQuery实现追加表格,不使用拼接html方式

以下为本人原创,转载请注明出处。

/*
* 向表格中追加行
*
* @param tableId 需追加table的ID @param tableRowData
* 追加行的数据(Json格式,需要按照列的顺序排放且都已经Format完毕)
*
* @return 无
*
*/
function addTableRow(tableId, tableRowData) {
var insertTr = $(‘#‘ + tableId + ‘ tr:last‘).clone(true);
var jsonArray = eval("(" + tableRowData + ")");
// 设定序号
var tableLength = $("#" + tableId).find("tr").length;
insertTr.children(‘td‘).eq(0).html(tableLength + 1);
// 将json数据循环追加到表的每一列
var i = 1;
for ( var jsonUnit in jsonArray) {
insertTr.children(‘td‘).eq(i).html(jsonArray[jsonUnit]);
i++;
}
$(‘#‘ + tableId + ‘ tr:last‘).after(insertTr);
}

/*
* 更新Table中某行的数据
*
* @param tableId 需追加table的ID @param rowNum 需更新table的行号(默认从1开始计算即可) @param
* tableRowData 追加行的数据(Json格式,需要按照列的顺序排放且都已经Format完毕)
*
* @return 无
*
*/
function uptTableRow(tableId, rowNum, tableRowData) {
var uptTr = $(‘#‘ + tableId + ‘ tr:‘ + rowNum);
var jsonArray = eval("(" + tableRowData + ")");
// 将json数据循环追加到表的每一列
var i = 1;
for ( var jsonUnit in jsonArray) {
uptTr.children(‘td‘).eq(i).html(jsonArray[jsonUnit]);
i++;
}
}

时间: 2024-10-17 19:41:11

JQuery实现追加表格,不使用拼接html方式的相关文章

第84天:jQuery动态创建表格

jQuery动态创建表格 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动态创建表格</title> 6 <script src="jquery-1.11.1.js"></script> 7 <style> 8 table {

jquery实现的表格添加或者删除行操作

jquery实现的表格添加或者删除行操作:对于表格的使用应该是非常的熟悉了,下面是一段非常强大的代码,能够实现表格行的添加删除甚至可以对单元格进行编辑,下面就分享一下次代码,希望能够对大家有所帮助,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.soft

jQuery如何获取表格的指定行和列

jQuery如何获取表格的指定行和列:在堆表格进行操作的时候往往要获取指定的行和咧,也就是需要进行精确的定位,本章节就简单的介绍一下如何实现此功能.一.获取指定的行:由于代码比较简单,这里就不给出完整的代码了,只给出代码片段:1.为表格最后一行单元格添加一个class类. $("#mytable tr:last").find("td").addClass("setcolor") 2. 为表格第一个行单元格添加一个class类. $($("

二.jquery.datatables.js表格数据添加

1.后台php public function addtable(){ $data = $_POST; if(M('yanfa_project')->add($data)){ $this->ajaxReturn("success"); } } 二.jquery.datatables.js表格数据添加

jquery插入复杂表格,合并行列

原文:jquery插入复杂表格,合并行列 此方法为个人测试所写,针对各种兼容性问题还未测试,初写的目的是easyui复杂表头有些缺陷,比如某个表头合并两列, 在easyui中这样操作无法绑定两个值 或者说我没找到 再或者 可以做个隐藏 数据列 ,不过闲来无事 自己写了写jquery,下面进入正题 先展示下效果 指标性选择为 表头的隐藏用 (客户要求可自定义表头,在extjs中表单自带这个功能,不过复杂表头好像也不支持,单行表头判断条件少的多,比较好实现) 从图片中 可以看到 复杂表头,数据自动合

三.jquery.datatables.js表格编辑与删除

1.为了使用如图效果(即将按钮放入行内http://www.datatables.net/examples/ajax/null_data_source.html) 采用了另一个数据格式 2.后台php,取表格数据变为: public function initable(){ $db = M('yanfa_project')->select(); // 取$db的长度 // $len =count($db); $item=array(); // 循环将$db二维数组每一项的value取出放一个数组

jQuery异步获取json数据的2种方式

jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: { "one" : "Hello", "two" : "World" } ■ 通过$.getJSON方法获取json数据 <script src="Scripts/jquery-2.1.1.min.js"

jQuery中ajax的4种常用请求方式

jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下. 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml"). 实例: 保存数据到服务器,成功时显示信息. $.ajax({ type: "post", dataType: "

JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式

一:用最底层的方式,该方式用来创建别的对象树也可以 代码演示: <html> <head> <title>DHTML技术演示---表格创建--用最底层的方式,其实该方式用来创建别的对象树也可以</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css&qu