jquery动态生成表格

最新推荐文章于 2022-10-11 18:14:17 发布
最新推荐文章于 2022-10-11 18:14:17 发布
阅读量926 收藏 3
点赞数
分类专栏： jquery 文章标签： javascript xhtml json ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhyp29/article/details/84805477
版权
这篇博客介绍了如何使用jQuery动态生成表格，并展示了如何添加、删除表格行和列，以及实现表格行的高亮和奇偶行颜色变化。还涉及到jQuery操作表格中的数据，包括获取和设置单元格值，以及全选和全不选的功能。示例代码详细解释了这些功能的实现方法。
摘要由CSDN通过智能技术生成
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="../20120319/include/jquery.js"></script>
<script language="javascript" type="text/javascript" >
$(document).ready(function (){
$("#submit").click(function (){
//先获取文本框的值
var $name=$("#name").val();
var $email=$("#email").val();
var $phone=$("#phone").val();
//创建tr、td并且把内容放入td中
var $tr=$("<tr><td>"+$name+"</td><td>"+$email+"</td><td>"+$phone+"</td><td><a href='#' class='lj'>DELETE</a></td></tr>");
$tr.appendTo("#table");
//如果在函数内部进行删除，直接使用click即可
$(".lj").click(function (){
//$(this)获取的是点击的对象，点击的对象是a标签，a标签的上一级的上一级是tr
$(this).parent().parent().remove();
})
});

/*
//如果在外部进行删除 ，需要使用live进行删除
$(".lj").live("click",function (){
//删除
$(this).parent().parent().remove();
});
*/

});
</script>
</head>

<body>
<div style="background-color:#CCC; width:700px; height:500px; margin-left:300px;">
<form >
<p align="center">添加用户：</p></td>

        姓名:<input type="text" id="name" />
email:<input type="text" id="email" />
电话:<input type="text" id="phone" /><br /><br />

<p align="center"><input type="button" id="submit" value="提交" /></p> <br /><br />
</form>
<hr color="#FFFFFF" /><br />
<table width="600" border="1" id="table" bordercolor="#FFFFFF" align="center">
<tr id="top">
<td>姓名</td>
<td>email</td>
<td>电话</td>
<td>删除</td>
</tr><br />
</table>
</div>
</body>
</html>
parent：查找每个段落的父元素
live:live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。
传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。
live应用小例子：<body> <div class="clickme">Click here</div></body>
可以给这个元素绑定一个简单的click事件：
$('.clickme').bind('click', function() { alert("Bound handler called.");});
当点击了元素，就会弹出一个警告框。然后，想象一下这之后有另一个元素添加进来了。
$('body').append('<div class="clickme">Another target</div>');
尽管这个新的元素也能够匹配选择器 ".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。
.live() 就提供了对应这种情况的方法。
如果我们是这样绑定click事件的：
$('.clickme').live('click', function() { alert("Live handler called."); });然后再添加一个新元素： $('body').append('<div class="clickme">Another target</div>');
然后再点击新增的元素，他依然能够触发事件处理函数。

Query——动态给表格添加序号
很多时候遇到需要对表格动态操作，而且一般都会有表格的序号，但是有时候我们对表格的序号直接输出是比较麻烦的，所以尝试一下使用jquery动态输出吧~~


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://common.cnblogs.com/script/jquery.js"
type="text/javascript"></script>
<title>jQuery</title>
</head>
<body>
<table width=500 border=2>
<tr><td width=250>序号</td><td width=250>项目</td></tr>
<tr><td></td><td>Port</td></tr>
<tr><td></td><td>Port</td></tr>
<tr><td></td><td>Port</td></tr>
<tr><td></td><td>Port</td></tr>
<tr><td></td><td>Port</td></tr>
<tr><td></td><td>Port</td></tr>
<tr><td></td><td>Port</td></tr>
<tr><td></td><td>Port</td></tr>
</table>
</body>
</html>


原始效果：


 

JS代码如下：


$(function(){
//$('table tr:not(:first)').remove();
var len = $('table tr').length;
for(var i = 1;i<len;i++){
$('table tr:eq('+i+') td:first').text(i);
}

});

利用jquery给指定的table添加一行、删除一行<script language="javascript" src="./jquery.js"></script>
<table border="1px #ooo" id="test" name="test" class="test" cellpadding="0" cellspacing="0" width="20%">
<tr id="1"><td width="30%">1</td><td width="30%">2</td><td width="30%">3</td></tr>
<tr id="2"><td width="30%">11</td><td width="30%">22</td><td width="30%">33</td></tr>
</table>
<table border="1px #ooo" id="test1" name="test1" cellpadding="0" cellspacing="0" width="20%">
<tr id="4"><td width="30%">1</td><td width="30%">2</td><td width="30%">3</td></tr>
</table>
<input type="button" name="button" value="add" οnclick="addtr('test');">
<input type="button" name="button" value="del" οnclick="deltr('test');">
<script>
//在id为test的table的最后增加一行
function addtr(id){
tr_id = $("#test>tbody>tr:last").attr("id");
tr_id++;
//alert(tr_id);
str = "<tr id = '"+tr_id+"'><td width='30%'>re1</td><td width='30%'>re2</td><td width='30%'>re3</td></tr>";
$('#'+id).append(str);
}
//删除id为test的table的最后一行
function deltr(id){
tr_id = $("#test>tbody>tr:last").attr("id");
$('#'+tr_id).remove();
}
</script>
 
jQuery动态添加删除表格的行和列  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.cl1{
background-color:#FFFFFF;
}
.cl2{
background-color:#FFFF99;
}
</style>
<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var rowCount = 0;
var colCount = 2;
 
function addRow(){
rowCount++;
var rowTemplate = '<tr class="tr_'+rowCount+'"><td>'+rowCount+'</td><td class="cl1">内容'+rowCount+'</td><td class="cl1"><a href="#" οnclick=delRow('+rowCount+')>删除</a></td></tr>';
var tableHtml = $("#testTable tbody").html();
tableHtml += rowTemplate;
$("#testTable tbody").html(tableHtml);
}
 
function delRow(_id){
$("#testTable .tr_"+_id).hide();
rowCount--;
}
 
function addCol(){
colCount++;
$("#testTable tr").each(function(){
 
var trHtml = $(this).html();
trHtml += '<td οnclick="delCol('+colCount+')">增加的td</td>';
$(this).html(trHtml);
});
 
}
 
function delCol(_id){
 
$("#testTable tr").each(function(){
$("td:eq("+_id+")",this).hide();
});
colCount--;
}
 
function mover(_id){
$("#testTable tr:not(:first)").each(function(){
$("td:eq("+_id+")",this).removeClass("cl1");
$("td:eq("+_id+")",this).addClass("cl2");
});
}
 
function mout(_id){
$("#testTable tr:not(:first)").each(function(){
$("td:eq("+_id+")",this).removeClass("cl2");
$("td:eq("+_id+")",this).addClass("cl1");
});
}
</script>
<title>jquery操作表格测试</title>
</head>
<body>
<table id="testTable" border="1" width="500">
<tr>
<td>序号</td>
<td οnmοuseοver="mover(1);" οnmοuseοut="mout(1);">内容</td>
<td οnmοuseοver="mover(2);" οnmοuseοut="mout(2);">操作</td>
</tr>
</table>
<input type="button" value="添加行" οnclick="addRow();"/>
<input type="button" value="添加列" οnclick="addCol();"/>
</body>
  jquery操作表格(添加/删除行、添加/删除列)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<title>jquery操作表格测试</title>
<script type="text/javascript">
function del(_id){
$("#testTable .tr_"+_id).html('');
var tableTr = $("#testTable .tr_"+_id).hide();
}
function addRow(){
var addRowTemplete = '<tr class="tr_'+tableCount+'"><td class="cl1">'+tableCount+'</td><td class="cl1">内容'+tableCount+'</td><td class="cl1"><a href="javascript:void(0)" οnclick=del('+tableCount+');>删除</a></td></tr>';
$("#testTable tbody").append(addRowTemplete);
}
function addCol(){
$("#testTable tr").each(function(){
   var trHtml = "<td οnclick='delCol("+colCount+")'>曾加的td</td>";
   $(this).append(trHtml);
});
}
function delCol(_id){
$("#testTable tr").each(function(){
   $("td:eq("+_id+")",this).hide();
});
}


</script>
</head>
<body>
<table width="487" border="1" id="testTable">
<tr>
<td οnclick="delCol(0)">序号</td>
<td οnclick="delCol(1)">内容</td>
<td οnclick="delCol(2)">操作</td>
</tr>
</table>
<p>
<input type="button" name="Submit" value="添加行" οnclick="addRow()" />
<input type="button" name="Submit2" value="添加列" οnclick="addCol()"/>
</p>
</body>
</html>
 
 
 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的百分之一女装店官方网站|白菜园社区|4000-921001|就爱百分一</title>
<meta name="keywords" content="我的百分之一,我的百分之一女装店,我的百分之一商城,我的百分之一淘宝" />
<meta name="description" content="我的百分之一淘宝三金冠女装店官方网站100f1.com,仅为百分一有品位的美女！我的百分之一商城每月发布新款时尚女装和潮流服饰女装搭配。" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>
<body>
<div id="wrap" class="wrap">
<div class="fatie" id="fatie">
<dl class="options">
<dd>选项<span>1</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>
<dd>选项<span>2</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>
<dd>选项<span>3</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>
<dd>选项<span>4</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>
<dd>选项<span>5</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>
</dl>
<p class="add_opt">
<span class="base_icon">添加更多选项</span>
</p>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){//投票选项增减控制
var fatie = $("#fatie");
var option = fatie.find(".options dd");
function list_again(){//选项重新排序
option.each(function(){
var i = $(this).index();
$(this).find("span").html(i+1);
})
}
fatie.find(".add_opt span").click(function(){//增加选项
fatie.find(".options").append('<dd>选项<span>i</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>');
option = fatie.find(".options dd");
list_again();
})
option.find("a").live("click",function(){//删除选项
$(this).parent().remove();
list_again();
})
})
</script>
</html>

本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法。分享给大家供大家参考，具体如下：
用JS去遍历Table的所有单元格中的内容，可以用如下JS代码实现：
function GetInfoFromTable(tableid) {
var tableInfo = "";
var tableObj = document.getElementById(tableid);
for (var i = 0; i < tableObj.rows.length; i++) { //遍历Table的所有Row
for (var j = 0; j < tableObj.rows[i].cells.length; j++) { //遍历Row中的每一列
tableInfo += tableObj.rows[i].cells[j].innerText; //获取Table中单元格的内容
tableInfo += " ";
}
tableInfo += "\n";
}
return tableInfo;
}

这个方法的参数是唯一标识Table的id，用document对象的获取
jQuery 遍历Table中tr中的td中的内容：
1、$("#trID td").text()得到的是一个所以trID之中td的值 返回一个字符串。
2、$("#trID").children 得到一个trID下的所有td，然后遍历$("#trID").children使用.eq(index).text()得到td中的值;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=gb2312"/>
<title>无标题文档</title>
<scriptlanguage="javascript"src="jquery-1.6.2.min.js"type="text/javascript"></script>
<scriptlanguage="javascript">
$(document).ready(function() {
$("#table a").each(function (){
this.onclick = function(){
var thisObj = this.parentNode.parentNode;
var a = $(thisObj).children();
var arr = new Array();
var laber = $("#xiugai label");
for(var i=0;i<a.length;i++){
arr[arr.length] = a.eq(i).text();
}
for(var i=0;i<laber.length;i++){
laber.eq(i).text(arr[i]);
}
$("#table").hide();
$("#xiugai").show(2000)
}
});
});
function fanhui(){
$("#table").show(2000);
$("#xiugai").hide(2000);
}
</script>
</head>
<body>
<divid ="table">
<tablewidth="470"border="0"cellspacing="0"cellpadding="0">
<trid="tr1">
<td>id</td>
<td>名字</td>
<td>密码</td>
<td>操作</td>
</tr>
<trid="tr2">
<td>1</td>
<td>张三</td>
<td>12</td>
<td><ahref="#">删除</a></td>
</tr>
<trid="tr3">
<td>2</td>
<td>李四</td>
<td>34</td>
<td><ahref="#">删除</a></td>
</tr>
<trid="tr4">
<td>3</td>
<td>王五</td>
<td>56</td>
<td><ahref="#">删除</a></td>
</tr>
<trid="tr5">
<td>4</td>
<td>六子</td>
<td>78</td>
<td><ahref="#">删除</a></td>
</tr>
</table>
</div>
<divid ="xiugai"style="display:none; background-color:#FFC; height:360px; width:260px">
ID：<label></label><br/>
姓名:<label></label><br/>
密码:<label></label><br/>
<buttonοnclick="fanhui()">返回</button>
</div>
</body>
</html>

添加按钮

<input name="button" type="button" value="添加" onClick="addRowForPswdBasicFillTemplate('pswd_basic_fill_template')">

table id是pswd_basic_fill_template
添加方法

function addRowForPswdBasicFillTemplate(tid){
var applyAreaOptionStr = $('#applyAreaOptionStr').val(); //这里是对select框的一些初始化
did = tid;
var tr = $("<tr></tr>").attr("bgcolor","#FFFFFF");
tr.append($("<td></td>").html("<input type='radio' name='radio' value='checkbox'></td>"));
tr.append($("<td></td>").html(""));
tr.append($("<td></td>").html("<input type='text' name='index_name' id='index_name' />"));
tr.append($("<td></td>").html(""));
tr.append($("<td></td>").html("<select name='apply_Area' id='apply_Area'>"+applyAreaOptionStr+"</select>"));
tr.append($("<td></td>").html("<select name='index_species' id='index_species'>"+$("#indexSpeciesHtml").val()+"</select>"));
tr.append($("<td></td>").html("<textarea maxlength='500' rows='3' cols='20' name='formula' id='formula'/>"));
tr.append($("<td></td>").html("<input type='text' name='cap' id='cap' size='5'/>"));
tr.append($("<td></td>").html("<input type='text' name='base_value' id='base_value' size='5'/>"));
tr.append($("<td></td>").html("<input type='hidden' id='orgid' name='orgid' />
<select name='assessOrg' id='assessOrg'>"+$("#assessOrgHtml").val()+"</select>"));
tr.appendTo($("#"+tid));
setRowNumber_1(tid); //保存编号，上移下移操作会用到 ，先不关注
}

保存按钮

<input name="button" type="button" value="保存" onClick="savePswdBasicFillTemplate('pswd_basic_fill_template')">

保存方法

function savePswdBasicFillTemplate(tid){
did = tid;
var result = getPswdBasicFillTemplate(); //封装数据操作，请仔细看
if(result){
/*
if(pswd_basic_fill_template.length<1){
showInfo("请添加基础数据标准");
return;
}
*/
for(var i=0;i<pswd_basic_fill_template.length;i++){
pswd_basic_fill_template[i]=JSON.stringify(pswd_basic_fill_template[i]);
}
$.post("<c:url value='/secbasicFillTemplate/save'/>"
最低0.47元/天 解锁文章
zhyp29
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现动态生成表格
11-13
数据展示时候，经常从后台传入大小不等的矩阵。这里给出了根据不同矩阵大小，通过jquery的html()和append(）方法动态生成html表格的实例。
jquery动态创建表格
爱吃鱼油
07-15 1221
html代码 js代码 var myObj = [{ "name": "张三1111", "sex": "男","addr":"天津"}, { "name": "张狗", "sex": "男","addr":"上海"}, { "name": "张武", "sex": "男","addr":"北京"}, ]; //鼠标焦点移入时，查询匹配的数据，填充表格进行显
Jquery 动态生成表格
rose_zz的专栏
12-23 845
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 动态创建表格 function CreateTable(rowCount,cellCount) { var table=$(""); ta
使用JQuery动态创建表格
qq_32077521的博客
10-21 847
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <scrip...
Jquery 动态生成表格示例代码
10-26
本示例将详细讲解如何使用jQuery动态生成表格，这对于在网页上展示实时数据或根据用户操作动态更新内容的场景非常有用。 首先，我们需要在HTML文件中引入jQuery库。在这个示例中，我们使用的是jQuery 1.3.2版本，...
JQuery 动态生成Table表格实例代码
11-29
在动态生成表格的场景中，这两个方法非常实用。 以下是一个简单的HTML结构，包含了两个按钮和一个空的`div`用于展示动态生成的表格： ```html ; charset=gb2312"> 动态创建表格 ...
jQuery动态生成表格及右键菜单功能示例
10-20
在本示例中，我们将深入探讨如何使用jQuery来动态生成表格以及实现右键菜单功能。首先，我们需要了解jQuery的基本概念。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在这...
jQuery动态生成Bootstrap表格
10-21
接下来，使用`for`循环生成表格体（`<tbody>`）的行（`<tr>`），每行有两个单元格（`<td>`）：一个显示姓名，一个显示年龄。每个单元格的内容都是动态生成的，例如“张三0”、“张三1”等。 值得注意的是，每个年龄...
Jquery创建动态表格
03-26
NULL 博文链接：https://niuka.iteye.com/blog/1152312
JQuery动态创建表格
xcx010321的博客
12-28 1702
<style> table {border: 1px solid #ccc; border-collapse: collapse; } th,td { border: 1px solid #ccc; color: #000; padding: 10px } th { background-color: ...
jQuery生成动态表格
Sicimike的博客
04-30 9571
前言 工作中常常需要动态的添加或者删除表格行或者列，所以稍微整理了一下，实现了一些比较通用的功能。 效果 除表头外，第一行模拟从后台加载的数据，其余的行为动态添加 点击保存后，改行自动变成第一行的效果 点击删除时，如果改行未保存，则直接删除；如果改行保存过，则会提示 删除成功后，行号会自动维护 复选框实现了全选、全不选、部分选择的效果 每一行都会有一个固定的ID，和行号不一定相同 源文件 d...
案例：jQuery动态创建表格（完整代码）
最新发布
m0_65085680的博客
10-11 1536
案例：jQuery动态创建表格（完整代码）
html 动态创建表格,jquery动态创建表格
weixin_42351102的博客
06-09 532
html代码js代码var myObj = [{ "testname": "张三1111", "sex": "男","addr":"天津"},{ "testname": "张狗", "sex": "男","addr":"上海"},{ "testname": "张武", "sex": "男","addr":"北京"},];//创建表格。function createMyTable(rowCount,...
jquery动态生成表格数据
qq123aa2006的博客
04-10 1686
$.each(newData, function (k, v) { if (k == 0) { $.each(v.split("|"), function (o, l) { ...
jquery动态生成表格讲解
weixin_47612165的博客
11-09 615
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title>.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值