JS前端合并TABLE相同列的单元格

function _w_table_rowspan(_w_table_id,_w_table_colnum){
    _w_table_firsttd = "";     
    _w_table_currenttd = "";     
    _w_table_SpanNum = 0;     
    _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");     
    _w_table_Obj.each(function(i){     
        if(i==0){     
            _w_table_firsttd = $(this);     
            _w_table_SpanNum = 1;     
        }else{     
            _w_table_currenttd = $(this);  
            if(_w_table_firsttd.parent().attr("invoiceNumber") ==_w_table_currenttd.parent().attr("invoiceNumber")){     
                _w_table_SpanNum++;
                $(_w_table_currenttd).attr("disable", "true");
                _w_table_currenttd.hide(); //remove();     
                _w_table_firsttd.attr("rowSpan",_w_table_SpanNum);     
            }else{     
                _w_table_firsttd = $(this);     
                _w_table_SpanNum = 1;     
            }     
        }
    });
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个前端合并单元格拖拽的代码示例: HTML 代码: ```html <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td rowspan="2">小明</td> <td>男</td> <td>20</td> </tr> <tr> <td>男</td> <td>21</td> </tr> <tr> <td>小红</td> <td>女</td> <td>22</td> </tr> </tbody> </table> ``` CSS 代码: ```css table { border-collapse: collapse; } th, td { border: 1px solid black; padding: 5px; } td.dragging { opacity: 0.5; } ``` JavaScript 代码: ```js const tdList = document.getElementsByTagName('td') let dragging = false let dragStartIndex = -1 for (let i = 0; i < tdList.length; i++) { const td = tdList[i] td.addEventListener('mousedown', function (event) { if (event.button === 0) { dragging = true dragStartIndex = i td.classList.add('dragging') } }) td.addEventListener('mousemove', function () { if (dragging) { const dragEndIndex = i const [startIndex, endIndex] = [Math.min(dragStartIndex, dragEndIndex), Math.max(dragStartIndex, dragEndIndex)] const rows = [] for (let j = startIndex; j <= endIndex; j++) { const row = tdList[j].parentNode rows.push(row) } rows[0].cells[0].rowSpan = rows.length for (let j = 1; j < rows.length; j++) { rows[j].removeChild(rows[j].cells[0]) } dragging = false dragStartIndex = -1 td.classList.remove('dragging') } }) td.addEventListener('mouseup', function () { dragging = false dragStartIndex = -1 td.classList.remove('dragging') }) td.addEventListener('mouseleave', function () { dragging = false dragStartIndex = -1 td.classList.remove('dragging') }) } ``` 这段代码可以实现在表格中拖拽合并单元格的功能。用户可以在表格中按住鼠标左键并拖动,选中需要合并单元格范围,松开鼠标左键后,选中的单元格会被合并

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值