<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>Automatic Quotation System</h1> <table id="titlebar" cellspacing="1px"> <tr> <td style="width:540px;" colspan="2">✓ (Click check box and "Delete Button" to delete the entry)</td> </tr> </table> <form action="send.php" method="POST"> <table id="dataTable" width="auto" style="margin:-4px 0 0 0;" cellspacing="0px"> <tr> <td style="width:20px;"><INPUT type="checkbox" name="chk" /></td> <td style="width:160px;">Country:</td> <td> <SELECT name="country" style="width:100px;" required> <OPTION value="China">China</OPTION> <OPTION value="Hong Kong">Hong Kong</OPTION> <OPTION value="U.S.">U.S.</OPTION> <OPTION value="disabled" disabled>------</OPTION> <OPTION value="five">five</OPTION> <OPTION value="six">six</OPTION> <OPTION value="seven">seven</OPTION> </SELECT> </td> <td style="width:160px;">Equipment Type:</td> <td> <SELECT name="country" style="width:100px;" required> <OPTION value="Router">Router</OPTION> <OPTION value="Switch">Switch</OPTION> <OPTION value="Server">Server</OPTION> <OPTION value="disabled" disabled>------</OPTION> <OPTION value="five">five</OPTION> <OPTION value="six">six</OPTION> <OPTION value="seven">seven</OPTION> </SELECT> </td> </tr> </table> <INPUT type="button" value="Add row" onclick="addRow('dataTable')" /> <INPUT type="button" value="Delete row" onclick="deleteRow('dataTable')" /> <INPUT type="submit" value="Send"/> </form>

table,tr,td{border:1px solid black;}

function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[0].cells[i].innerHTML; //alert(newcell.childNodes); switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "text": newcell.childNodes[0].value = ""; break; case "text": newcell.childNodes[0].value = ""; break; case "text": newcell.childNodes[0].value = ""; break; case "text": newcell.childNodes[0].value = ""; break; case "checkbox": newcell.childNodes[0].checked = false; break; case "select-one": newcell.childNodes[0].selectedIndex = 0; break; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { if(rowCount <= 1) { alert("Cant delete all rows"); break; } table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } }