前端合并单元格行和列

<table>

<h2> 合并单元格</h2>

<!-- 1.先确定是跨行还是跨列合并 -->

<!-- 2.找到目标单元格,写上合并方式= 合并的单元格数量,比如:<td colspan=""></td> -->

<!-- 3.删除多余的单元格 -->

<table width="500" height="249" border="1" cellspacing="0" align ="center">

  <tr>

    <td></td>

    <td colspan="2"></td>

  </tr>

<tr>

  <td rowspan="2"> </td>

  <td></td>

  <td></td>

</tr>

<tr>

  <td></td>

  <td></td>

</tr>

</table>

以下是一个前端合并单元格拖拽的代码示例: 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、付费专栏及课程。

余额充值