将表单元格的索引附加到自身,考虑行跨度和行跨度
Append index of table cell to itself considering rowspans and colspans
我想将表格单元格的索引附加到该单元格的文本中。我可以使用标准表执行此操作,但是当有合并的单元格时,我的代码不起作用。
代码如下:
$("td").each( function() {
$(this).append($(this).index());
});
以下是标准表的结果:
|---|---|---|---|
| 0 | 1 | 2 | 3 |
|---|---|---|---|
| 0 | 1 | 2 | 3 |
|---|---|---|---|
| 0 | 1 | 2 | 3 |
|---|---|---|---|
下面是包含合并单元格的表的结果:
|---|---|---|---|
| | 1 | 2 | 3 |
| 0 |---|---|---|
| | 0 | 1 | 2 |
|---|---|---|---|
| 0 | 1 | 2 |
|---|---|---|---|
以下是我想为具有合并单元格的表格实现的目标:
|---|---|---|---|
| | 1 | 2 | 3 |
| 0 |---|---|---|
| | 1 | 2 | 3 |
|---|---|---|---|
| 0 | 1 | 3 |
|---|---|---|---|
有什么想法吗?
这是一个小提琴...http://jsfiddle.net/many_tentacles/5PQcF/
一种方法是:
var $highest;
$("table.writeIndex tr").each(function(){
$highest=$('td',this).length;
})
$("table.writeIndex tr").each( function() {
var $td=$('td',this).length;
var count=$td;
$("td",this).each(function(){
var attr = $(this).attr('colspan');
if(typeof attr !== 'undefined' && attr !== false){
count=count+parseInt(attr)-1;
var previous=$(this).prev();
while(previous.length>0){
previous.html(previous.html()-1);
previous=previous.prev();
}
$(this).append($highest-count);
count=count-parseInt(attr);
}else{
$(this).append($highest-count);
count=count-1;
}
})
});
工作演示小提琴
我找到的一个解决方案是使用 cellPos
插件从这个问题中获取
/* cellPos jQuery plugin
---------------------
Get visual position of cell in HTML table (or its block like thead).
Return value is object with "top" and "left" properties set to row and column index of top-left cell corner.
Example of use:
$("#myTable tbody td").each(function(){
$(this).text( $(this).cellPos().top +", "+ $(this).cellPos().left );
});
*/
(function($){
/* scan individual table and set "cellPos" data in the form { left: x-coord, top: y-coord } */
function scanTable( $table ) {
var m = [];
$table.children( "tr" ).each( function( y, row ) {
$( row ).children( "td, th" ).each( function( x, cell ) {
var $cell = $( cell ),
cspan = $cell.attr( "colspan" ) | 0,
rspan = $cell.attr( "rowspan" ) | 0,
tx, ty;
cspan = cspan ? cspan : 1;
rspan = rspan ? rspan : 1;
for( ; m[y] && m[y][x]; ++x ); //skip already occupied cells in current row
for( tx = x; tx < x + cspan; ++tx ) { //mark matrix elements occupied by current cell with true
for( ty = y; ty < y + rspan; ++ty ) {
if( !m[ty] ) { //fill missing rows
m[ty] = [];
}
m[ty][tx] = true;
}
}
var pos = { top: y, left: x };
$cell.data( "cellPos", pos );
} );
} );
};
/* plugin */
$.fn.cellPos = function( rescan ) {
var $cell = this.first(),
pos = $cell.data( "cellPos" );
if( !pos || rescan ) {
var $table = $cell.closest( "table, thead, tbody, tfoot" );
scanTable( $table );
}
pos = $cell.data( "cellPos" );
return pos;
}
})(jQuery);
jQuery(function(){
$('td').html(function(){
return $(this).cellPos().left
})
})
演示:小提琴
试试这个
$("td").each( function(index) { // use index in function
$(this).append(index);
});
相关文章:
- 如何在单击单元格中的链接值时动态更改表行背景色
- 将JS封装到GWT单元格表中
- 谷歌工作表中的按钮,当单击时,会更改特定单元格的背景
- 通过单击引导表单元格选中复选框
- 在javascript中第一次单击行时获取表单元格值
- 获取HTML表中单击的列中第一个单元格和单击的行中第一个单元的内容
- 谷歌应用程序将电子邮件表单脚本转换为PDF格式,但希望清除一些单元格
- 在没有jQuery的JavaScript中查找单击的表单元格的行和列
- 单击表格单元格或单击图像本身时翻转图像
- 向动态创建的表中的单元格添加单击函数 - JavaScript
- 如何使用jQuery使表格中的每个单元格可单击
- JQuery或Javascript获得标签文本在表格单元格与单选按钮和标签的组合
- 如何在Meteor中为带有输入单元格表的表单做响应式绑定?
- 如何获得骨干事件的单元格视图单击
- Javascript隐藏表格单元格按钮单击
- 更改jQuery单元格表值
- 如何使单元格可单击并返回值
- 剑道网格文本选择在单元格/表内与多选启用
- 在td -访问下一个单元格中单击
- 打开一个表单后点击更多的单元格表(jquery/php)