Thứ Năm, 14 tháng 2, 2019

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

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 

Không có nhận xét nào:
Write nhận xét