I want to build a button which when clicked opens new row with the same input field. There is also an Checkbox which when clicked opens a textarea to write remarks.Adding row is fine but the checkbox dosen't work properly. I want to appear the textarea to display below the row. Andshould work for each row the same.
Can Anyone Help Me.? here's my code..
<html>
<head>
<title> Add/Remove dynamic rows in HTML table </TITLE>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="BS/css/bootstrap.min.css">
<script src="BS/jquery.min.js"></script>
<script src="BS/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://ift.tt/2g6N0YS">
<script language="javascript">
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 "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("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
function ShowHideDiv(chkPassport) {
var dvPassport = document.getElementById("dvPassport");
dvPassport.style.display = chkPassport.checked ? "block" : "none";
}
</script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="panel panel-primary">
<div class="panel-body">
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<table id="dataTable" width="100%" border="0">
<tr>
<td style="padding-top: 20px;"><input type="checkbox" name="chk"/></td>
<td><label>Product Type</label><br /><input class="form-control" type="text" name="ProType" placeholder="Product Type"/></td>
<td><label>Handled By</label><br /><input class="form-control" type="text" name="HandledBy" placeholder="Handled By"/></td>
<td><label>Completion Date</label><br /><input class="form-control" type="date" name="ComDate" placceholder="Completion Date"/></td>
<td><label>Amount</label><br /><input class="form-control" type="text" name="Amount" placeholder="Amount"/></td>
<td><label>Remarks</label><br /><input class="form-control" type="checkbox" name="chk2"/></td>
<td><label for="chkPassport">
<input type="checkbox" id="chkPassport" onclick="ShowHideDiv(this)" />
Do you have Passport?
</label>
</td>
<td id="dvPassport" style="display: none"><input type="text" id="txtPassportNumber" /></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire