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);

javascript create del row function button or chkbox

I was trying to make a delete button to delete rows or using chkbox and button to delete rows. When I use the deleteRow function, it will delete all rows in the table. Also, I have assigned an element id to do other functions, so I cannot change the addrow function about assign element id.
When i use delete button, it can do i wanted. I want to delete the row when the checkbox checked How can i use checkbox to delete row ?
Here's my code:
HTML:
<form>
<table>
<tr>
<td align="center" colspan="3"></td>
</tr>
</table>
<table id="dataTable" class='table table-striped table-hover table-bordered'>
<tr>
<td align="center"><b>Product ID:</b></td>
<td><input type="text" name="productid" id="productid" class="form-control" /></td>
<td align="center"><b>QTY:</b></td>
<td><input type="text" name="poqty" id="poqty" class="form- control"></td>
</tr>
<tr>
<input type="button" value="Add Item" onclick="addRow('dataTable')" class="form-control" />
<input type="button" value="del Item" onclick="deleteRow('dataTable')" class="btn btn-default" />
</tr>
<tr>
<td>
<input type="submit" value="confirm">
</td>
</tr>
<div id="txtHint"></div>
<div id="qty123"></div>
</td>
</tr>
</table>
</form>
Javascript:
<script language="javascript">
var y = 0;
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";
element1.id = "chkone" + y;
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox1[]";
element2.id = "txtone" + y;
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox2[]";
element3.id = "txtre" + y;
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox3[]";
element4.id = "qtyone" + y;
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox4[]";
element5.id = "txtra" + y;
cell5.appendChild(element5);
y++;
}
</script>
<script>
function deleteRow(dataTable) {
var table = document.getElementById(dataTable);
var row = document.getElementById(dataTable);
row.parentNode.removeChild(row);
}
</script>
I want to delete the row when the checkbox checked , How can i use checkbox to delete row ?

There's probably more than one problem here, but what sticks out to me is this:
<input type="button" value="Add Item" onclick="addRow(tableID)" class="form-control" />
It doesn't look like you're correctly passing tableID to this function, whereas you're correctly passing a parameter to the deleteRow() function. Where is tableID in your code?
Given the code you've posted, nothing happens when you invoke addRow() because the function is never fired - tableID is undefined.

Dynamic Rows and Table

I am trying to implement a dynamic table but when the button is pressed to add a row the row is added but the input text box is not inserted in both cells. Any idea how to solve this problem.
<html>
<body>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<table id="dataTable" width="150px" border="1">
<tr>
<td height="27">
1
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var firstCell = row.insertCell(0);
firstCell.innerHTML = rowCount + 1;
var secondCell = row.insertCell(1);
var thirdCell = row.insertCell(2);
var element = document.createElement("input");
element.type = "text";
element.name = "txtbox[]";
secondCell.appendChild(element);
}
</script>

You need to add another "input" element and append this into the thirdCell.
Try changing the last bit of your javascript function to this:
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox1[]";
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";
secondCell.appendChild(element1);
thirdCell.appendChild(element2);
Shown here
Note: Your script tag should go inside the body of the html.
Here is what the final code could look like:
<html>
<body>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<table id="dataTable" width="150px" border="1">
<tr>
<td height="27">
1
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var firstCell = row.insertCell(0);
firstCell.innerHTML = rowCount + 1;
var secondCell = row.insertCell(1);
var thirdCell = row.insertCell(2);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox1[]";
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";
secondCell.appendChild(element1);
thirdCell.appendChild(element2);
}
</script>
</body>
</html>

You have not written the code to add a new text element to the third column. Add the below mentioned code after "secondCell.appendChild(element);" section of your code:
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox2[]";
thirdCell.appendChild(element2);

Unable To edit html table using javascript

I want to edit content of my html table using javascript. I am getting content in the form on click of edit button but when i click on save button it doesn't update the values of that row please help me out as it'll be very appreciated..
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(myTable) {
var table = document.getElementById("myTable");
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 cell3=row.insertCell(2);
var cell4=row.insertCell(3);
cell2.innerHTML=document.getElementById('txtname').value;
cell3.innerHTML=document.getElementById('txtauthor').value;
cell4.innerHTML=document.getElementById('txtcdate').value;
}
function deleteRow(myTable) {
try {
var table = document.getElementById(myTable);
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);
}
}
function edt(myTable) {
try {
var table = document.getElementById(myTable);
var rowCount = table.rows.length;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
document.getElementById("txtname").value = table.rows[i].cells["1"].innerHTML;
document.getElementById("txtauthor").value = table.rows[i].cells["2"].innerHTML;
document.getElementById("txtcdate").value = table.rows[i].cells["3"].innerHTML;
//document.getElementById("et1").value = table.rows[i].cells["4"].innerHTML;
//document.getElementById("ep1").value = table.rows[i].cells["5"].innerHTML;
document.getElementById("crw").value = i;
}
}
}catch(e) {
alert(e);
}
}
function savedit(myTable){
if(null != chkbox && true == chkbox.checked) {
var table = document.getElementById("myTable");
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 cell3=row.insertCell(2);
var cell4=row.insertCell(3);
cell2.innerHTML=document.getElementById('txtname').value;
cell3.innerHTML=document.getElementById('txtauthor').value;
cell4.innerHTML=document.getElementById('txtcdate').value;
}
}
</SCRIPT>
</HEAD>
HTML
<BODY>
<INPUT type="button" value="Add Row" onClick="addRow('myTable')" />
<INPUT type="button" value="Delete Row" onClick="deleteRow('myTable')" />
<INPUT type="button" value="Edit Row" onClick="edt('myTable')" />
<INPUT type="button" value="Save" onClick="savedit('myTable')" />
<table id="myTable" border="1">
<thead>
<th id="name"><input type="checkbox" id="chkbox" /></th>
<th id="name">Name</th>
<th id="author">Author</th>
<th id="cdate">Date</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="chkbox1" /></td>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td><input type="checkbox" id="chkbox2" /></td>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
</tbody>
</table>
<form name="create"2 style="width:80px;">
Name:<input type="text" id="txtname" /><br/>
Author<input type="text" id="txtauthor" name="txtauthor" /><br/>
Date:<input type="text" id="txtcdate" name="txtcdate" /><br/>
Content:<input type="text" id="txtcontent" name="txtcontent" style="height:80px; " />
</form>
<input type="hidden" id="crw">
</BODY>
</HTML>

replace edit function with following code(vice verse of your add function)
function savedit(myTable){
var table = document.getElementById(myTable);
var rowCount = table.rows.length;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.rows[i].cells["1"].innerHTML = document.getElementById("txtname").value ;
table.rows[i].cells["2"].innerHTML = document.getElementById("txtauthor").value;
table.rows[i].cells["3"].innerHTML = document.getElementById("txtcdate").value ;
//document.getElementById("et1").value = table.rows[i].cells["4"].innerHTML;
//document.getElementById("ep1").value = table.rows[i].cells["5"].innerHTML;
document.getElementById("txtname").value = '';
document.getElementById("txtauthor").value = '';
document.getElementById("txtcdate").value = '' ;
chkbox.checked = false;
document.getElementById("crw").value = i;
}
}
}
I strongly recommend you to use some plugin or grid like kendo that is already tested and working

can not access the dynamically created textbox value in servlet getting null value as output

my javascript function is below where I am creating the 2 textboxes dynamically each time when the addRow() function is called on button click.Also,I am setting name attribute for each textbox dynamically.but I am not able to access these textbox values from servlet and getting null value as output.
<html>
<head>
<script>
var count=1;
function addRow()
{
var table = document.getElementById('table');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "item "+ count;
// document.write(element1.name);
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "amount" + count;
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
cell3.innerHTML = ' <input type="button" value="Edit" onclick="editRow(this)"/><input type="button" value="Delete" onclick="deleteRow(this)"/>';
cell3.setAttribute("style", "display:none;");
var cell4 = row.insertCell(3);
cell4.innerHTML = '<input type="button" value="Save" onClick="saveRow(this)">';
document.listform.hfield.value=rowCount;
count++;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>Create your list</title>
</head>
<body>
<form name="listform" method="post" action="Billingservlet">
<div class="wrap">
<center>
<div id="display">
<table id='table' border="0">
<tr id='id'>
<th>
Item Name
</th>
<th>
No. of units
</th>
</tr>
</table>
<input type="button" value="Add another item" onclick="addRow()">
<input type="submit" value="Submit List">
<input type="hidden" name="hfield">
</div>
</center>
</div>
</form>
</body>
</html>