Đặt colspan/rowspan cho ô

Tôi có bảng và tôi muốn thay đổi colspan/rowspan thuộc tính của ô trên thời gian chạy. Dưới đây là ví dụ:Đặt colspan/rowspan cho ô

<html> 
    <head> 
     <script type="text/javascript"> 
      function setColSpan() { 
       document.getElementById('myTable').rows[0].cells[0].colSpan = 2 
      } 
     </script> 
    </head> 

    <body> 
     <table id="myTable" border="1"> 
      <tr> 
       <td>cell 1</td> 
       <td>cell 2</td> 
      </tr> 
      <tr> 
       <td>cell 3</td> 
       <td>cell 4</td> 
      </tr> 
     </table> 
     <form> 
      <input type="button" onclick="setColSpan()" value="Change colspan"> 
     </form> 
    </body> 

</html>

Vấn đề của tôi là thay đổi ô. Tôi có phải loại bỏ các tế bào mà tế bào trong câu hỏi kéo dài?

Tôi có thể làm gì mà không xóa?

Tôi muốn triển khai bảng tính đơn giản. Hiện tại, tôi đã có thể chọn một dải ô hình chữ nhật và hiển thị menu có tùy chọn "Hợp nhất các ô đã chọn". Tôi muốn có thể "unmerge" tế bào, vì vậy nó sẽ là tốt để span tế bào mà không cần phải loại bỏ các tế bào khác.

Nguồn

2013-02-01 warvariuc

Nếu bạn muốn hợp nhất các ô, giá trị của nó như thế nào? Bạn có muốn ghép các giá trị từ cả hai ô không? – DON

@DON, Lý tưởng nhất là tôi muốn giữ bằng cách nào đó giá trị (có thể nó chỉ có thể ẩn các ô "ghi đè"?). Nếu không, chỉ cần xóa. – warvariuc

Tôi nghĩ bạn cần phải xóa ô. Kiểm tra với mã sau đây. Những gì tôi đã làm đã bị xóa toàn bộ hàng và đã thêm hàng mới với khoảng cột mới

function setColSpan() { 
    var table = document.getElementById('myTable'); 
    table.deleteRow(0); 
    var row = table.insertRow(0); 
    var cell = row.insertCell(0); 
    cell.innerHTML= "cell 1" 
    cell.colSpan = 2 
}

Nguồn

2013-02-01 04:25:57 999k

Các tế bào thay đổi vì đó là những gì bạn đang yêu cầu. Bạn đang xác định một bảng như sau:

<tr> 
    <td colspan="2">cell 1</td> 
    <td>cell 2</td> 
</tr> 
<tr> 
    <td>cell 3</td> 
    <td>cell 4</td> 
</tr>

Vì vậy, sự thay đổi bạn đang thấy là những gì tôi mong đợi.

Nếu bạn muốn hợp nhất các ô, bạn sẽ phải lấy nội dung của tất cả ô đã phối, ghép chúng vào một ô duy nhất và xóa phần còn lại. Đối với ví dụ nhỏ, nó sẽ như sau:

function setColSpan() { 
    var myTable = document.getElementById('myTable'); 
    var cell2html = myTable.rows[0].cells[1].innerHTML; 
    myTable.rows[0].deleteCell(1); 
    myTable.rows[0].cells[0].innerHTML = myTable.rows[0].cells[0].innerHTML + ' ' + cell2html; 
    myTable.rows[0].cells[0].colSpan = 2; 
}

Tuy nhiên, một giải pháp mạnh mẽ hơn là ... loại phức tạp. Đặc biệt là nếu bạn muốn khả năng hủy hợp nhất. Bạn sẽ phải bảo tồn thông tin của cấu trúc ô cũ bằng cách nào đó ... có thể với việc đặt một thứ gì đó như <span class="oldCell">cell 2</span> xung quanh dữ liệu đã hợp nhất? Và sau đó kiểm tra sự tồn tại của "oldCell" kéo dài khi unmerging? Nhưng sau đó bạn sẽ phải bảo tồn thông tin đó thông qua chỉnh sửa của người dùng. Và tìm hiểu ý nghĩa của việc hợp nhất giữa các hàng và cột. Và cũng tìm ra ý nghĩa của việc hợp nhất chồng chéo.

Nguồn

2014-04-14 14:49:09 spinn

Đặt colspan/rowspan cho ô

Trả lời

Các vấn đề liên quan