dynamical add remove row
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...