如何使用JavaScript或jquery拆分表单元格td

btqmn9zl 于 2023-10-17 发布在 jQuery

关注(0)|答案(1)|浏览(192)

你好，我坚持对如何分裂一个表格单元格的表格是动态生成的。这是我走了多远：

function splitcell(){

    var tableid = localStorage.getItem('value');

    var table = document.getElementById(tableid);

    var td = table.querySelectorAll('td.highlight');

    if(td.length > 1){

   alert("You cannot split two highlighted cells at a time. Please choose one cell to split at a     time"); 

  }
 var clone =  td[0].cloneNode(true);

 alert(clone.outerHTML);

 }

html表

<table id="ideaef0" class="table-striped" style="margin-left: -120px; width: 950px; margin-top: 30px;" onclick="RealClickHandler(this)" border="1">
   <thead>
   <tr>
     <th id="thid55e9e" class="ui-resizable">
        <input type="text" class="header-input" placeholder="Edit Header 1"><span></span>
        
     </th>
     <th id="thid55e9e" class="ui-resizable">
        <input type="text" class="header-input" placeholder="Edit Header 2"><span></span>
      
     </th>
     </tr>
     </thead>
     <tbody>
  <tr>
     <td class="ui-resizable" contenteditable="true">
     
     </td>
     <td class="ui-resizable" contenteditable="true">
     
     </td>
     </tr>
     <tr>
     <td class="ui-resizable" contenteditable="true">
    
      </td>
      <td class="ui-resizable" contenteditable="true">
       
     </td>
     </tr>
     <tr>
     <td class="ui-resizable" contenteditable="true">
     
     </td>
     <td class="ui-resizable" contenteditable="true">
       
     </td>
    </tr>
    <tr>
     <td class="ui-resizable" contenteditable="true">
      
     </td>
     <td class="ui-resizable" contenteditable="true">
        
     </td>
     </tr>
    </tbody>
    </table>

我喜欢水平和垂直拆分单元格。我知道这个想法应该是在复制td时，它应该colspan或rowspan其他td。我需要你帮忙

jquery

来源：https://stackoverflow.com/questions/77071188/how-to-split-table-cell-td-using-javascript-or-jquery

1条答案

按热度按时间

8nuwlpux1#

试试这个代码

查找要拆分的表格单元格（td）。
创建新的td元素。
相应地更新原始td元素和新td元素的内容。
在同一行中的原始td之后插入新的td元素。

function splitCell() {
    var tableId = localStorage.getItem('value');
    var table = document.getElementById(tableId);
    var td = table.querySelectorAll('td.highlight');

    if (td.length !== 1) {
        alert("Please choose one cell to split at a time.");
        return;
    }

    var originalCell = td[0];
    var newRow = originalCell.parentNode.cloneNode(true); // Clone the entire row

    
    var newCell = document.createElement('td');
    newCell.className = 'ui-resizable';
    newCell.contentEditable = true;
    newCell.innerHTML = ''; 

    
    originalCell.parentNode.insertBefore(newCell, originalCell.nextSibling);

    
    originalCell.innerHTML = ''; 

    alert("Cell split successfully.");
}

赞(0）回复(0）举报 2023-10-17

我来回答

如何使用JavaScript或jquery拆分表单元格td

1条答案

相关问题

热门标签

最新问答