dynamical add remove row

avatar
unknown
abc
4 years ago
2.7 kB
6
Indexable
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
           
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <!-- Custom styles for this template -->
  <link href="style.css" rel="stylesheet">

 

</head>
<body>
<table class="table table-bordered" id="dynamic-field" style="border:1px solid black">
<thead class="">
    <tr>
        <th style="width:16.6%;">Lokasi</th>
        <th style="width:16.6%">Peng. Pekerjaan</th>
        <th style="width:16.6%;">Peng. Manuver</th>
        <th style="width:16.6%;">Peng. K3</th>
        <th style="width:16.6%;">Pekerja 1</th>
        <th style="width:16.6%;">Pekerja 2</th>
    </tr>
</thead>
<tbody class="">
    <tr>
        <td><input type="text" id="col0" name="" style="height:30px; width:116.6px; border:1px solid #fff;"></td>
        <td><input type="text" id="col1" name="" style="height:30px; width:116.6px; border:1px solid #fff;"></td>
        <td><input type="text" id="col2" name="" style="height:30px; width:116.6px; border:1px solid #fff;"></td>
        <td><input type="text" id="col3" name="" style="height:30px; width:116.6px; border:1px solid #fff;"></td>
        <td><input type="text" id="col4" name="" style="height:30px; width:116.6px; border:1px solid #fff;"></td>
        <td><input type="text" id="col5" name="" style="height:30px; width:116.6px; border:1px solid #fff;"></td>
    </tr>
</tbody>
</table>
<button type="button" name="add" id="add" class="btn btn-link" onclick="addRows()">add</button>
<button type="button" name="remove" id="remove" class="btn btn-link" onClick="deleteRows()">remove</button>

<script language="JavaScript" type="text/javascript">





    function addRows(){ 
        var table = document.getElementById('dynamic-field');
        var rowCount = table.rows.length; // kebawah 2
        var cellCount = table.rows[0].cells.length; //kekanan 6
        var row = table.insertRow(rowCount);
        for(var i =0; i <= cellCount; i++){
            var cell = 'cell'+i;
            cell = row.insertCell(i);
            var copycel = document.getElementById('col'+i).innerHTML;
            cell.innerHTML=copycel;
		
 	    }
    }
function deleteRows(){
	var table = document.getElementById('emptbl');
	var rowCount = table.rows.length;
	if(rowCount > '2'){
		var row = table.deleteRow(rowCount-1);
		rowCount--;
	}
	else{
		alert('There should be atleast one row');
	}
}
   
</script>
   
    
</html>
Editor is loading...