We Keep Coding

Edit button not working in table

I am creating datab;e for user wherein after they have added the subject they can change the descrption but not the code. I am able to add and delete the content but not sure of how to edit only the description column.I am new to javascript and jquery so not sure of how to incorporate this
Javascript
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name = "chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "checkbox";
element4.name = "chkbox[]";
cell4.appendChild(element4);
}
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) {
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
HTML used is
<label>Academic Year</label>
<input type="text" name="acadyear" readonly>
<br>
<br>
<label>Class</label>
<input type="text" name="stuclass" readonly>
<label>Section</label>
<input type="text" name="stusection" readonly>
<br>
<br>
<input type="button" value="Add Subject" onclick="addRow('dataTable')" />
<input type="button" value="Delete Subject" onclick="deleteRow('dataTable')" />
<br>
<br>
<table id="dataTable" style="text-align: left; width: auto; height: 32px;" border="2" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<th></th>
<th>Subject Code</th>
<th>Subject Description</th>
<th>Enrol?</th>
</tr>
<tr>
<td>
<input type="checkbox" name="chk[]">
</td>
<td>
<input type="text" name="subcode[]">
</td>
<td>
<input type="text" name="subdesc[]">
</td>
<td>
<input type="checkbox" name="enrol[]">
</td>
</tr>
</tbody>
</table>

Are you expecting something like this?
I am making the subject code field readonly after the user changes it using JQuery change event.
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name = "chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.className = 'sub';
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "checkbox";
element4.name = "chkbox[]";
cell4.appendChild(element4);
}
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) {
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
$('body').on('change', '.sub', function(e) {
$(this).attr('readonly', 'readonly');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Academic Year</label>
<input type="text" name="acadyear" readonly>
<br><br>
<label>Class</label>
<input type="text" name="stuclass" readonly>
<label>Section</label>
<input type="text" name="stusection" readonly>
<br><br>
<input type="button" value="Add Subject" onclick="addRow('dataTable')" />
<input type="button" value="Delete Subject" onclick="deleteRow('dataTable')" />
<br><br>
<table id="dataTable" style="text-align: left; width: auto; height: 32px;" border="2" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<th></th>
<th>Subject Code</th>
<th>Subject Description</th>
<th>Enrol?</th>
</tr>
<tr>
<td><input type="checkbox" name="chk[]"></td>
<td><input type="text" name="subcode[]" class="sub"></td>
<td><input type="text" name="subdesc[]"></td>
<td><input type="checkbox" name="enrol[]"></td>
</tr>
</tbody>
</table>

make the subject reeadonly
<td><input type="text" name="subcode[]" readonly class="sub"></td>
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.className = 'sub';
element2.setAttribute('readonly',true)
cell2.appendChild(element2);

add/remove multiple rows using checkbox with JQUERY

I have snippet in javascript that add/remove multiple rows within a table. I would like to implement the same thing into JQUERY. At the moment, the checkboxes does'nt work, but I would like them to work for the sake of userbility. I got no clue on jquery at moment. Would you help on the implementation.
Fiddle:http://jsfiddle.net/ronn_nasso/qN2Z8/
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<link rel="stylesheet" type="text/css" href="addRemove.css"/>
<script language="JavaScript" type="text/javascript">
function hasClass(el, cssClass) {
return el.className && new RegExp("(^|\\s)" + cssClass + "(\\s|$)").test(el.className);
}
var rowNumber = 1;
function addRow(tableID) {
var counter = document.getElementById(tableID).rows.length-1;
var row = document.getElementById(tableID);
var newRow0 = row.rows[1].cloneNode(true);
var newRow1 = row.rows[counter].cloneNode(true);
// Increment
rowNumber ++;
newRow0.getElementsByTagName('td')[1].innerHTML = rowNumber;
// Update the child Names
var items = newRow0.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].value = null;
items[i].name = counter + '_' + items[i].name;
}
var refRow = row.getElementsByTagName('tbody')[0];
refRow.insertBefore(newRow0, refRow.nextSibling);
refRow.insertBefore(newRow1, refRow.nextSibling);
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var i = table.rows.length - 1;
while (2 < i && !hasClass(table.rows[i], 'row-parent')) {
table.deleteRow(i)
i--;
}
if (2 < i) {
table.deleteRow(i)
rowNumber --;
}
}
function addChildRow(e, tableID) {
var table = document.getElementById(tableID);
var newRow = table.rows[0].cloneNode(true);
// Increment
if (e > 0)
if (!isNaN(table.rows[e-1].getElementsByTagName('td')[4].innerHTML))
var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[4].innerHTML)
else
var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[1].innerHTML)
newRow.getElementsByTagName('td')[1].innerHTML = counter + 1;
// Update the child Names
var items = newRow.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].value = null;
items[i].name = counter + '_' + items[i].name;
}
var i = e;
while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
i--;
var parent = table.rows[i].getElementsByTagName('td');
parent[0].rowSpan = counter+2;
parent[1].rowSpan = counter+2;
parent[2].rowSpan = counter+2;
var refRow = table.getElementsByTagName('tr')[e-1];
refRow.parentNode.insertBefore(newRow, refRow.nextSibling);
}
function deleteChildRow(e, tableID) {
var table = document.getElementById(tableID);
var i = e;
while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
i--;
if (e-1 > i)
table.deleteRow(e-1)
}
</script>
</HEAD>
<BODY>
<form action="Untitled-2.php" name="dataTable" method="post">
<table width="760" id="dataTable" border="1">
<tr>
<td width="20">
<input type="checkbox" name="chk1" />
</td>
<td width="12">1</td>
<td width="200">
<input type="text" name="txtbox1[]" />
</td>
<td width="146">
<input type="text" name="txtbox2[]" />
</td>
<td width="188">
<input type="text" name="txtbox3[]" />
</td>
</tr>
<tr class="row-parent">
<td width="22" rowspan="2">
<input type="checkbox" name="chk" />
</td>
<td width="12" rowspan="2">1</td>
<td width="149" rowspan="2">
<input type="text" name="txtbox[]" />
</td>
<td width="20">
<input type="checkbox" name="chk1" />
</td>
<td width="12">1</td>
<td width="200">
<input type="text" name="txtbox1[]" />
</td>
<td width="146">
<input type="text" name="txtbox2[]" />
</td>
<td width="188">
<input type="text" name="txtbox3[]" />
</td>
</tr>
<tr>
<td width="20"> </td>
<td width="12"> </td>
<td>
<input type="button" value="Add Row" onClick="addChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
<input type="button" value="Delete Row" onClick="deleteChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
</td>
<td width="146"> </td>
<td width="188"> </td>
</tr>
</table>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
</form>
</BODY>
</HTML>
Fiddle:http://jsfiddle.net/ronn_nasso/qN2Z8/

$("#ADD").click(function(){
$("table").append($("tr:last").clone(true));
//clone the last row and add it to table
$("tr:last input").val("");
//reset all the inputs in the last row
});
$("#DEL").click(function(){
$("table tr input:checked").parents('tr').remove();
//find the rows with checked check boxes in them and remove them
});
SAMPLE

updated your code to this:
$("#btnAddRow").on("click",function(){
addRow('dataTable');
});
$("#btnDelRow").on("click",function(){
deleteRow('dataTable');
});
$("#btnAddChildRow").on("click",function(){
var index = $(this).closest('tr').index();
addChildRow(index,'dataTable');
});
$("#btnDelChildRow").on("click",function(){
var index = $(this).closest('tr').index();
deleteChildRow(index,'dataTable');
});
working fiddle here: http://jsfiddle.net/qN2Z8/5/ (check this fiddle)
i hope it helps.

Try following code
<input type="button" id="addPOIbutton" value="Add POIs"/><br/><br/>
<table id="POITable" border="1">
<tr>
<td>1</td>
<td><input type="checkbox" id="chck"/></td>
<td><input size=25 type="text" id="latbox"/></td>
<td><input size=25 type="text" id="lngbox" readonly=true/></td>
<td><input type="button" id="delPOIbutton" value="Delete Row" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addmorePOIbutton" value="Add Row" onclick="insRow()"/></td>
</tr>
</table>
<script>
function deleteRow(row)
{
var i=row.parentNode.parentNode.rowIndex;
document.getElementById('POITable').deleteRow(i);
}
function insRow()
{
var x=document.getElementById('POITable');
var new_row = x.rows[0].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
x.appendChild( new_row );
}
</script>
Link to fiddle here

add/remove multiple rows using checkbox with javascript

I'm stuck with javascript I working on. I want to add more fields dynamically, my problem is I want to be able to add a row with input boxes. Within the added row, first column contain checkbox, second column contain an increment number, third column contain input txtbox, fourth column checkbox1, fifth column contain input txtbox1 and sixth column contain input txtbox3. Now my question is, how would I add dynamicaly second row under fourth column checkbox1, fifth column txtbox1 and sixth column txtbox3 while maintaing alignment with checkbox,txtbox?
And within the added row, if possible it have to have two button, add row and delete row.
Here is snippet which runs but doesn't do want I expecting:
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var i=0;
i++;
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 0;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "checkbox";
element4.name="chkbox[]";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
cell5.innerHTML = rowCount -1;
var cell6 = row.insertCell(5);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox1[]";
cell6.appendChild(element5);
var cell7 = row.insertCell(6);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "txtbox2[]";
cell7.appendChild(element6);
var cell8 = row.insertCell(7);
var element7 = document.createElement("input");
element7.type = "text";
element7.name = "txtbox3[]";
cell8.appendChild(element7);
}
function addVillageNames()
{
}
function removeVillageNames()
{
}
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) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<form action="Untitled-2.php" name="Untitled-2" method="post">
<table width="760" id="dataTable" border="1">
<tr>
<TD width="22" rowspan="2"><INPUT type="checkbox" name="chk"/></TD>
<TD width="12" rowspan="2"> 1 </TD>
<TD width="149" rowspan="2"> <INPUT type="text" name="txtbox[]" /> </TD>
<TD width="20"><INPUT type="checkbox" name="chk1"/></TD>
<TD width="12"> 1 </TD>
<TD width="200"> <INPUT type="text" name="txtbox1[]" /></TD>
<TD width="146"> <INPUT type="text" name="txtbox2[]" /> </TD>
<TD width="188"> <INPUT type="text" name="txtbox3[]" /> </TD>
</TR>
<tr>
<TD width="20"> </TD>
<TD width="12"> </TD>
<TD><input type="button" value="Add Row1" onClick="addRow1('dataTable')" /> <input type="button" value="Delete Row1" onClick="deleteRow1('dataTable')" /></TD>
<TD width="146"> </TD>
<TD width="188"> </TD>
</TR>
</TABLE>
<tr>
<td>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" /> </td></tr>
</form>
</BODY>
</HTML>

As much as I love plain/vanilla javascript, I would have to recommend jQuery for your next project. Here's a jsfiddle of the code using only plain/vanilla javascript.
Here's the JavaScript function you'll need
function hasClass(el, cssClass) {
return el.className && new RegExp("(^|\\s)" + cssClass + "(\\s|$)").test(el.className);
}
var rowNumber = 1;
function addRow(tableID) {
var counter = document.getElementById(tableID).rows.length-1;
var row = document.getElementById(tableID);
var newRow0 = row.rows[1].cloneNode(true);
var newRow1 = row.rows[counter].cloneNode(true);
// Increment
rowNumber ++;
newRow0.getElementsByTagName('td')[1].innerHTML = rowNumber;
// Update the child Names
var items = newRow0.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].value = null;
items[i].name = counter + '_' + items[i].name;
}
var refRow = row.getElementsByTagName('tbody')[0];
refRow.insertBefore(newRow0, refRow.nextSibling);
refRow.insertBefore(newRow1, refRow.nextSibling);
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var i = table.rows.length - 1;
while (2 < i && !hasClass(table.rows[i], 'row-parent')) {
table.deleteRow(i)
i--;
}
if (2 < i) {
table.deleteRow(i)
rowNumber --;
}
}
function addChildRow(e, tableID) {
var table = document.getElementById(tableID);
var newRow = table.rows[0].cloneNode(true);
// Increment
if (e > 0)
if (!isNaN(table.rows[e-1].getElementsByTagName('td')[4].innerHTML))
var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[4].innerHTML)
else
var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[1].innerHTML)
newRow.getElementsByTagName('td')[1].innerHTML = counter + 1;
// Update the child Names
var items = newRow.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].value = null;
items[i].name = counter + '_' + items[i].name;
}
var i = e;
while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
i--;
var parent = table.rows[i].getElementsByTagName('td');
parent[0].rowSpan = counter+2;
parent[1].rowSpan = counter+2;
parent[2].rowSpan = counter+2;
var refRow = table.getElementsByTagName('tr')[e-1];
refRow.parentNode.insertBefore(newRow, refRow.nextSibling);
}
function deleteChildRow(e, tableID) {
var table = document.getElementById(tableID);
var i = e;
while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
i--;
if (e-1 > i)
table.deleteRow(e-1)
}
And here's the HTML
<form action="Untitled-2.php" name="dataTable" method="post">
<table width="760" id="dataTable" border="1">
<tr>
<td width="20">
<input type="checkbox" name="chk1" />
</td>
<td width="12">1</td>
<td width="200">
<input type="text" name="txtbox1[]" />
</td>
<td width="146">
<input type="text" name="txtbox2[]" />
</td>
<td width="188">
<input type="text" name="txtbox3[]" />
</td>
</tr>
<tr class="row-parent">
<td width="22" rowspan="2">
<input type="checkbox" name="chk" />
</td>
<td width="12" rowspan="2">1</td>
<td width="149" rowspan="2">
<input type="text" name="txtbox[]" />
</td>
<td width="20">
<input type="checkbox" name="chk1" />
</td>
<td width="12">1</td>
<td width="200">
<input type="text" name="txtbox1[]" />
</td>
<td width="146">
<input type="text" name="txtbox2[]" />
</td>
<td width="188">
<input type="text" name="txtbox3[]" />
</td>
</tr>
<tr>
<td width="20"> </td>
<td width="12"> </td>
<td>
<input type="button" value="+ Child Row" onClick="addChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
<input type="button" value="- Child Row" onClick="deleteChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
</td>
<td width="146"> </td>
<td width="188"> </td>
</tr>
</table>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
</form>
And here's the CSS to hide the first row:
table tr:first-child {
display: none;
}

How to add dynamic rows in html table?

This is my first post and I am new in PHP, i am trying to build a POS system using PHP, but i stuck in sales module.
Problem is when I scan barcode of an item, it display in textbox where i have set focus, and when i click add item button but when i repeat this step for another item(s), it remove first item and replace it with latest item, i have put my 100% but can't figure out why this is happening, that's why please help me in this regards as i know there are so many good developers in php in this forum.
Here is my code for you:
<script type="text/javascript">
function setFocus(){
document.getElementById("searchitem").focus();
}
function change()
{
var searchitem = document.getElementById('searchitem');
if(searchitem.value == '')
{
searchitem.style.background = 'orange';
}
else
{
searchitem.style.background = '';
}
}
</script>
<?php $name = "Mehroz"; ?>
<SCRIPT language="javascript">
/* setInterval("SANAjax();",5000);
$(function(){
SANAjax = function(){
$('#dataDisplay').prepend("HI This").fadeIn("slow");
}
}) ; */
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 0;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.value = '<?php echo $name;?>';
element2.size = "15";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.size = "25";
element3.disabled = "disabled";
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "text";
element4.size = "3";
element4.disabled = "disabled";
cell5.appendChild(element4);
var cell6 = row.insertCell(5);
var element5 = document.createElement("input");
element5.type = "text";
element5.size = "3";
element5.disabled = "disabled";
cell6.appendChild(element5);
var cell7 = row.insertCell(6);
var element6 = document.createElement("input");
element6.type = "text";
element6.size = "5";
cell7.appendChild(element6);
var cell8 = row.insertCell(7);
var element7 = document.createElement("input");
element7.type = "text";
element7.size = "5";
cell8.appendChild(element7);
var cell9 = row.insertCell(8);
var element8 = document.createElement("input");
element8.type = "text";
element8.size = "10";
cell9.appendChild(element8);
var cell10 = row.insertCell(9);
var element9 = document.createElement("input");
element9.type = "submit";
element9.value = "Update";
cell10.appendChild(element9);
}
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) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
<script src="menuscript.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />
</head>
<body onload="setFocus();change();">
<div class="left">
<form action="javascript:addRow('dataTable')" method="POST">
<input id="searchitem" name="add" type="text" onkeyup="change()" size="75" onclick="javascript:addRow('dataTable')"></input></td><td width="25%" colspan="2">
<input type="submit" value="New Item" name="search">
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /></form>
</br>
<table width="98%" id="dataTable">
<tr bgcolor="97c950">
<b>
<td align="center" width="3%"></td>
<td align="center" width="5%">S#</td>
<td align="center" width="15%">Barcode</td>
<td align="center" width="27%">Item Name</td>
<td align="center" width="4%">Stock</td>
<td align="center" width="4%">Qty</td>
<td align="center" width="6%">Price</td>
<td align="center" width="6%">Disc.Rs.</td>
<!-- <td align="center" width="7%">Disc.%</td> -->
<td align="center" width="10%">Total</td>
<td align="center" width="23%"></td></tr>
<!-- <form action="javascript:addRow('dataTable')" method="POST">
<INPUT type="text" name="add" value=""/>
<INPUT type="submit" value="Add Row" name="search" />
</form> -->
<TR>
<TD><INPUT type="checkbox" name="chk" /></TD>
<TD> 1 </TD>
<TD> <INPUT type="textbox" size="15" /> </TD>
<TD> <INPUT type="textbox" size="25" disabled="disabled" /> </TD>
<TD> <INPUT type="textbox" size="3" disabled="disabled"/> </TD>
<TD> <INPUT type="textbox" size="3" disabled="disabled"/> </TD>
<TD> <INPUT type="textbox" size="5" /> </TD>
<TD> <INPUT type="textbox" size="5" /> </TD>
<TD> <INPUT type="textbox" size="10" /> </TD>
<TD> <INPUT type="submit" value="Update" /> </TD>
</TR>
</form>
</table>
</div>

Long story short, this is the code ( if I understood correctly what you are trying to achive ):
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#searchitem").focus().filter('input[value!=""]').addClass("orange");
});
</script>
<style type="text/css">
.orange
{
background-color: orange;
}
table#dataTable
{
empty-cells : show;
}
table#dataTable th
{
text-align : center;
background-color: #97C950;
}
.saved
{
background-color: green;
}
</style>
</head>
<body>
<form action="" method="POST" onSubmit="">
<input id="searchitem" type="text" size="75" value="" >
<input type="submit" name="search" value="New Item" >
<input id="deleteRow" type="button" value="Delete Row" >
</form>
<table style="width:98%;" id="dataTable">
<tr>
<th colspan="2" style="width:5%;">S#</th>
<th style="width:15%;">Barcode</th>
<th style="width:27%;">Item Name</th>
<th style="width:4%;">Stock</th>
<th style="width:4%;">Qty</th>
<th style="width:6%;">Price</th>
<th style="width:6%;">Disc.Rs.</th>
<th style="width:10%;">Total</th>
</tr>
</table>
<script type="text/javascript">
$('#searchitem').change(function()
{
var t = $('#dataTable');
t.append('<tr> \
<td><input type="checkbox"></td> \
<td>'+t.find('tr').length+'</td> \
<td><input size="15" type="text" value="'+$(this).val()+'"></td> \
<td><input size="25" type="text" value=""></td> \
<td><input size="3" type="text" value=""></td> \
<td><input size="3" type="text" value=""></td> \
<td><input size="5" type="text" value=""></td> \
<td><input size="10" type="text" value=""></td> \
<td><input size="15" type="text" value=""></td> \
<td><input type="button" value="Update" onClick="saveItem(event);"></td> \
</tr>');
});
function saveItem(ev)
{
// here read all rows from that row, send them via AJAX to the server to be saved
// you get the current row by looking at ev.currentTarget, something like this in Firefox
var args = [];
$(ev.currentTarget).parents('tr:first').find('input[type="text"]').each(function(){ args.push( $(this).val() ); });
$.post(
'saveItem.php',
args,
function(){ $(ev.currentTarget).addClass('saved');} /* this is triggered onSucces */
);
}
</script>
</body>
</html>
This is the long story:
you need to insert a new row in the table when you type something in input#searchitem
you don't save it in the database yet, first you insert the other columns (quantity, price etc ...)
them you hit the update button, the new row is inserted in the database and if everithing is OK the button will be colored "green"
This code is to give you a clue and to push you in the right direction (it's like a proof of concept), so here are more recomandations (hard to give beacause I still didn't understod exactly what are you trying to achive):
GLOBAL:
don't just copy/paste this code, try to undertand it, and change it for your own needs
CSS:
use external style sheet
set fixed columns width for the table
Javascript:
check if the bar code exists, highlight the row, and push it in to the visible area if is not visible (or show a box with " there are 5 more hidden rows), you can give names for the inputs like name=barcode ...
use those names in the args array to create a named array.
Hope this will help you.

How to dynamically add Date in a form using JavaScript?

I have this form code to dynamically add rows. How can I add a date dynamically?
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
}
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) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
This the code for adding row dynamically
This is the code for calendar
<script language="JavaScript" src="calendar_us.js"></script>
<link rel="stylesheet" href="calendar.css">
<INPUT type="text" name="testinput" />
<script language="JavaScript">
new tcal ({
// form name
'formname': 'testform',
// input name
'controlname': 'testinput'
});
</script>

add a new cell for example,
var cell4 = row.insertCell(3);
cell4.innerHTML = new Date();
.
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
<TD> <INPUT type="text" name="testinput" /></TD>
</TR>
can you explain where to insert the date?