Chèn thêm cột, hàng sử dụng javascript

By Thanh Tùng   Posted at  tháng 2 14, 2019   JavaScript No comments
Kết quả hình ảnh cho Chèn thêm cột, hàng sử dụng javascript
<html>



    function addRow(){
 var table = document.getElementById('myTable');
//var row = document.getElementById("myTable");
var x = table.insertRow(0);
var e =table.rows.length-1;
var l =table.rows[e].cells.length;
//x.innerHTML = " ";
 for (var c =0,  m=l; c  m; c++) {
table.rows[0].insertCell(c);
   table.rows[0].cells[c].innerHTML  = "  ";
}

}




function addColumn(){
       var table = document.getElementById('myTable');
        for (var r = 0, n = table.rows.length; r  n; r++) {
                table.rows[r].insertCell(0);
                table.rows[r].cells[0].innerHTML =  "  " ;

        }

    }

function deleteRow() {
    document.getElementById("myTable").deleteRow(0);

}

function deleteColumn() {
   // var row = document.getElementById("myRow");
 var table = document.getElementById('myTable');
 for (var r = 0, n = table.rows.length; r  n; r++) {
    table.rows[r].deleteCell(0);//var table handle 
}
}


<body>
<input type="button" value="row +" onClick="addRow()" border=0       style='cursor:hand'>
    <input type="button" value="row -" onClick='deleteRow()' border=0 style='cursor:hand'>
    <input type="button" value="column +" onClick="addColumn()" border=0 style='cursor:hand'>
    <input type="button" value="column -" onClick='deleteColumn()' border=0 style='cursor:hand'>

    <table  id='myTable' border=1 cellpadding=0 cellspacing=0>
 <tr id='myRow'>          
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
<tr>          
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

    </table>



</body>
</html>

Demo https://www.dlitz.net/software/addrow/addrow-v2.html 

About Thanh Tùng

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.
View all posts by: Thanh Tùng

0 nhận xét:

Connect with Us

Powered by Blogger.
back to top