有关table列、行遍历；列、行的动态合并，一直在整理，之前的业务有遇到，修修改改，最终实现了一个稳定的通用版本。之前一直都是做的私有笔记，现公布希望大家指正。顺带分享下开发这部分代码时遇到的问题及处理方式。持续更新中......
1 遍历table获取每行某列td内部的<span/>
table中固定某一列显示的是多标签<span/> ，下面示例是遍历table获取每行第十个td内部的<span/>。注意span和td使用的是 .html()和 .text()而不是 .val()。仅供参考。
$(function(){
var arr_cglx = new Array();
arr_cglx = $("[id=fbmx_cglx_yc]").text().replace(/\s/g,"");
for (var i=1;i<=arr_cglx.length;i++) {
if($('#TableId').find('tbody').find('tr:eq('+i+')').find('td:eq(10)').children('span').length>1){
//相关处理代码
}
}
})1.1 另两种写法
直接遍历tr(适合页面只有一个table);
通过td的name进行遍历。
$('tr').each(function(i){ //这里的n可有可无
//开始遍历每一行的每一列
for(var j=0;j<cells(3);j++){
$(this).children('td').eq(i).text(); //这里就拿到了第n行第i列的文字，你可以赋值给其他变量
}
})
根据name直接遍历获取
function getbtynum(){
// $("td[name='123']").text();
//遍历行
var num =0;
$("td[name='zt']").each(function(){
if($(this).text()==0){
num++;
};
})
return num;
}2 获取table的行数
这里是通过tbale ID定位table然后获取同class的多少，class一般写在tr上。
function check(){
var trSize= $("#DataTable .fpxx_tr_Class").size();
if(trSize==0){
alert("数据至少有一条");
return false;
}
return true;
}页面 （当然也可以用id,name等）
table id="DataTable" >
<tr id ="tr" class="fpxx_tr_Class"></tr>
</table>3 合并指定单元格并且根据隐藏id合并
/** * 合并指定表格（表格id为dataTable_id）指定列（列数为dataTable_colnum）的相同文本的相邻单元格
* dataTable_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data
* dataTable_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。
*/
<script text="javascript">
/** * 合并指定表格（表格id为dataTable_id）指定列（列数为dataTable_colnum）的相同文本的相邻单元格 * dataTable_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data * dataTable_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。 */
function dataTable_rowspan(dataTable_id, dataTable_colnum) {
dataTable_firsttd = "";
dataTable_firstNum = 0;
dataTable_currenttd = "";
dataTable_SpanNum = 0;
dataTable_Obj = $(dataTable_id + " tr td:nth-child(" + dataTable_colnum + ")");
dataTable_Obj.each(function(i) {
if (i == 0) {
dataTable_firsttd = $(this);
dataTable_firstNum = 0;
dataTable_SpanNum = 1;
} else {
dataTable_currenttd = $(this);
if ($.trim(dataTable_currenttd.text()) != "" && dataTable_firsttd.text() == dataTable_currenttd.text()&& $(dataTable_currenttd).find("input[type=hidden]").val()!=null && $(dataTable_firsttd).find("input[type=hidden]").val() == $(dataTable_currenttd).find("input[type=hidden]").val()) { //这边注意不是val()属性，而是text()属性
dataTable_SpanNum++; //alert("可折叠行："+dataTable_SpanNum+"要折叠的行："+dataTable_firstNum);
table_rownum = dataTable_SpanNum;
dataTable_currenttd.hide();
dataTable_firsttd.attr("rowSpan", dataTable_SpanNum);
//alert("text:"+$(dataTable_id + " tr:nth-child(" + dataTable_firstNum+1 + ")").children("td:1").html());
//$(dataTable_id + " tr:nth-child(" + dataTable_firstNum+1 + ")").children("td:2").attr("rowSpan", dataTable_SpanNum);
//dataTable3_Obj[i].attr("rowSpan", dataTable_SpanNum);
} else{
dataTable_firsttd = $(this);
dataTable_firstNum = i;
dataTable_SpanNum = 1;
}
}
});
}
$(function() {
dataTable_rowspan("#DataTable", 1);
});3.1 相同列合并（好几种写法，仅供参考）
合并指定列
/**
* 合并指定表格（表格id为dataTable_id）指定列（列数为dataTable_colnum）的相同文本的相邻单元格
* dataTable_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data
* dataTable_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。
*/
function dataTable_rowspan(dataTable_id, dataTable_colnum) {
dataTable_firsttd = "";
dataTable_currenttd = "";
dataTable_SpanNum = 0;
dataTable_Obj = $(dataTable_id + " tr td:nth-child(" + dataTable_colnum + ")");
dataTable_Obj.each(function(i) {
if (i == 0) {
dataTable_firsttd = $(this);
dataTable_SpanNum = 1;
} else {
dataTable_currenttd = $(this);
if (dataTable_firsttd.text() == dataTable_currenttd.text()) { //这边注意不是val()属性，而是text()属性
dataTable_SpanNum++;
dataTable_currenttd.hide(); //remove();
dataTable_firsttd.attr("rowSpan", dataTable_SpanNum);
} else {
dataTable_firsttd = $(this);
dataTable_SpanNum = 1;
}
}
});
}
$(function() {
dataTable_rowspan("#DataTable", "1");
dataTable_rowspan("#DataTable", "2");
});3.2 相同行合并
合并指定行相同文本
/**
* 合并指定表格（表格id为dataTable_id）指定行（行数为dataTable_rownum）的相同文本的相邻单元格
* dataTable_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ，此参数应为 #data
* dataTable_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。
* 如果为数字，则从最左边第一行为1开始算起。
* "even" 表示偶数行
* "odd" 表示奇数行
* "3n+1" 表示的行数为1、4、7、10.......
* w_table_maxcolnum 为指定行中单元格对应的最大列数，列数大于这个数值的单元格将不进行比较合并。
* 此参数可以为空，为空则指定行的所有单元格要进行比较合并。
*/
function dataTable_colspan(dataTable_id, dataTable_rownum, dataTable_maxcolnum) {
if (dataTable_maxcolnum == void 0) {
dataTable_maxcolnum = 0;
}
dataTable_firsttd = "";
dataTable_currenttd = "";
dataTable_SpanNum = 0;
$(dataTable_id + " tr:nth-child(" + dataTable_rownum + ")").each(function(i) {
dataTable_Obj = $(this).children();
dataTable_Obj.each(function(i) {
if (i == 0) {
dataTable_firsttd = $(this);
dataTable_SpanNum = 1;
} else if ((dataTable_maxcolnum > 0) && (i > dataTable_maxcolnum)) {
return "";
} else {
dataTable_currenttd = $(this);
if (dataTable_firsttd.text() == dataTable_currenttd.text()) {
dataTable_SpanNum++;
dataTable_currenttd.hide(); //remove();
dataTable_firsttd.attr("colSpan", dataTable_SpanNum);
} else {
dataTable_firsttd = $(this);
dataTable_SpanNum = 1;
}
}
});
});
}
使用：
//相同行合并
dataTable_rowspan("#dssTable", "2");
//相同列合并
for(i=1;i<=51;i++){
dataTable_colspan("#dssTable", i, "2");
}3.3 另一种写法
合并内容相同行
//合并单元格
function table_rowspan(table_id, table_colnum,table_hbfs) {
table_firsttd = "";
table_currenttd = "";
table_SpanNum = 0;
colnum_Obj = $(table_id + " tr td:nth-child(" + table_colnum + ")" );
colnum_Obj.each( function(i) {
if (i == 0) {
table_firsttd = $( this);
table_SpanNum = 1;
} else {
table_currenttd = $( this);
if(table_hbfs.trim()=="html"){
if (table_firsttd.html() == table_currenttd.html()) {
table_SpanNum++;
table_currenttd.hide(); //remove();
table_firsttd.attr( "rowSpan", table_SpanNum);
} else {
table_firsttd = $( this);
table_SpanNum = 1;
}
}else{
if (table_firsttd.text() == table_currenttd.text()) {
table_SpanNum++;
table_currenttd.hide(); //remove();
table_firsttd.attr( "rowSpan", table_SpanNum);
} else {
table_firsttd = $( this);
table_SpanNum = 1;
}
}
}
});
}
$(function(){
$("a[title]").tipTip();
//合并行
table_rowspan( "#DataTable", 1,"html");
table_rowspan( "#DataTable", 2,"html");
table_rowspan( "#DataTable", 3,"html");
table_rowspan( "#DataTable", 4,"html");
table_rowspan( "#DataTable", 5,"html");
table_rowspan( "#DataTable", 6,"html");
table_rowspan( "#DataTable", 7,"text");
});4 获取子元素个数
获取子元素个数
//获取id=div1下的子元素的个数
$('#div1').children().length;
//获取id=div1下的span元素个数
$('#div1').children('span').length;5 新增一行tr td
新增一行tr td
//新增操作
function addAction(obj) {
var tr;
try {
if (obj) {
tr = $(obj).parent().parent().clone(true);
} else {
tr = $("#hideTable tr").clone(true);
}
trAdd(tr);
// 编辑定点信息页面新增数据页面定位
//$(tr).find("input[type='text']:first").focus();
//fixHeight();
} catch(e) {
alert(e.message);
}
}
//tr增加具体逻辑，替换所有的表单项id 然后append
function trAdd(obj) {
alert( $("#DataTable").find("tr").length);
var trLength = $("#DataTable").find("tr").length;
$(obj).show();
$("#DataTable").append(obj);
setTrsxh();
}
//回填导入excel定点数据
function setDdxx(jsonData) {
var ddxx = eval('(' + jsonData + ')');
for (var i = 0; i < ddxx.length; i++) {
addAction(); //增加一行
//修改末尾行的内容
$("#DataTable tr:last").find("input").each(function() {
if (this.name != "" && this.value == "") {
this.value = eval('ddxx[i].' + this.name);
}
});
$("#DataTable tr:last").find("option").each(function() {
if (this.value == ddxx[i].ssdw) {
this.selected = true;
}
});
}
//fixHeight();
}
6 获取去掉空格的值
获取去掉空格的值，等同于java中的replace,对指定值进行替换
$("[id=fbmx_cglx_yc]").text().replace(/\s/g,"");7 span展示在td中没有换行
span展示在td中没有换行处理方式
<sapn style=" width: 200px!important;
float: left !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
word-wrap : break-word ;" >另外一种就是嵌套<pre><span>内容</span></pre>
<pre/>：保留换行符和空格
8 点击后置灰，置为不可用
点击后置灰，置为不可用
btn.gray.disabled {
border: 1px solid #1D8BE0;
background-color: #1D8BE0 !important;
color: #fff !important;
}
$("a.btn:not('#viewJs')").removeAttr("onclick").removeClass().addClass("btn gray disable").css("cursor", "default").attr('href', '####');
1433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
