We Keep Coding

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.

Pass Value from javascript to another jsp

I have a Javascript value from a.jsp and I want to pass the value of it to b.jsp.
how can it be done?
a.jsp
<script type="text/javascript">
var inspection_method_row_limit=50;
</script>
as example I want to pass to value of inspection_method which can be used in b.jsp.

In a.jsp, you need to forward to another jsp. I am assuming you will do it on a click of some anchor.
In javascript code, Make the final url.
var forward_url = "/jsp/b.jsp?inspection_method_row_limit="+50;
Update the location probably, on a click of an anchor tag...
Forward.
In the target jsp, use the following...
The value of inspection_method_row_limit is <b>
<%= request.getParameter("inspection_method_row_limit") %></b>!

<script type="text/javascript">
var inspection_method_row_limit=0;
var deleted_row_inspection_method="";
function myCreateFunction(tableID) {
var ClickMax = 5;
if (inspection_method_row_limit < ClickMax){
var table = document.getElementById(tableID);
var x = inspection_method_row_limit + 1;
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);
//compare if no deleted row before then enter if statement and numbering is follow inspection_method_row_limit
if (deleted_row_inspection_method == ""){
var cell2 = row.insertCell(1);
cell2.innerHTML = x;
var cell3 = row.insertCell(2);
var element2 = document.createElement("textarea");
element2.type = "textarea";
var txt = tableID + x;
element2.name = txt;
element2.className = "textarea2";
cell3.appendChild(element2);
}
//if user had deleted row before then the numbering of previously will be reuse
else
{
var stringlength = deleted_row_inspection_method.length;
var foundLocation = deleted_row_inspection_method.search("-");
var subStringname = deleted_row_inspection_method.substring(0,foundLocation);
deleted_row_inspection_method = deleted_row_inspection_method.slice(foundLocation + 1,stringlength);
var cell2 = row.insertCell(1);
cell2.innerHTML = subStringname;
var cell3 = row.insertCell(2);
var element2 = document.createElement("textarea");
element2.type = "textarea";
element2.name = tableID + subStringname;
element2.className = "textarea2";
cell3.appendChild(element2);
}
inspection_method_row_limit ++;
}
function myDeleteFunction(tableID) {
//delete row for inspection method
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) {
var res = row.cells[1].innerHTML + "-";
deleted_row_inspection_method = deleted_row_inspection_method.concat(res);
table.deleteRow(i);
rowCount--;
i--;
inspection_method_row_limit --;
}
}
}catch(e) {
alert(e);
}
</script>
<form action="index.html?pageid=inspection_session&content=inspection_summary_result" name="form1" id="form1" method="post" onsubmit="return validateForm(document.form1)" >
<tr>
<td width="300" height="100"><font style="font-size:18px">2. Inspection Method <img src="images/information.png" width="20" height="20" align="absmiddle" style="cursor:pointer;" title="Add Row for More Data" alt="Add Row for More Data"></font></td>
<td valign="top">
<button type="button" class="mybtn" onclick="myCreateFunction('inspection_method')"><img align="absmiddle" src="icons/action_add.png"/> Add Row</button>
<button type="button" class="mybtn" onclick="myDeleteFunction('inspection_method')"><img align="absmiddle" src="icons/action_remove.png"/> Delete Row</button>
<table id="inspection_method" border="1">
<tr>
<td width="50"><img src="images/001_06.gif" width="20" height="20" align="absmiddle" style="cursor:pointer;" title="Tick to Delete" alt="Tick to Delete"></td>
<td width="50">No.</td>
<td width="589">Description</td>
</tr>
</table><br>
</td>
</tr>
<table>
<tr>
<td height="45" colspan="4"><input type="submit" name="submit" class="mybtn3" value="Next"/> <input type="reset" class="mybtn3" name="reset" value="Reset"/></td>
</tr>
</table>
</form>

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

JavaScript - Incrementing a value attribute

I have a problem that I can't get my head around (pretty new to JavaScript). Need to know how to increment variables in HTML with an document.createElement event (if that's the right terminology).
I need to increment the 'value' attribute every time the "Add Row" button is clicked and vise versa for the "Delete Row" button.
So far I have:
HTML
<div id='ctrl_container'>
<form action='$thisuri' method='post' id='spa' name='date2'>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<table id="dataTable" border='0' cellspacing='0' cellpadding='0' >
<tr>
<th> Select </th>
<th> ID </th>
<th> Question </th>
</tr>
<tbody>
<tr>
<td> <input type="checkbox" name="chk[]" /> </td>
<td> 1<input type="hidden" name="Q[]" value="1" /> </td>
<td> <input type="text" name="txtbox[]" /> </td>
</tr>
</tbody>
</table>
<input type='Submit' value='Submit Planned Audit' name='send'>
</form>
</div>
JavaScript
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = document.getElementById(tableID).getElementsByTagName('tbody')
[1].getElementsByTagName('tr').length;
var row = table.insertRow(rowCount +1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "hidden";
element1.name = "Q[]";
element1.value = rowCount +1;
cell2.appendChild(element1);
cell2.innerHTML = rowCount +1;
}
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);
}
}
Can someone give me some pointers?

Have a look at this jsFiddle: http://jsfiddle.net/pDxnb/1/
It will definitely give you some pointers, since the row is actually being added visibly now. (The rowcount is not the problem here I guess)
The problem was and still is, is that you are adding empty cells as a row. I have added cell2 to the table and we can see things are happening.
var cell2 = row.insertCell(1);
cell2.appendChild(element1);
cell2.innerHTML = rowCount +1;
also what I did to debug is:
alert(rowCount);
You should be able to figure the rest out for yourself. If you need anymore help please comment below.
TIP:
Maybe it would be better to get your highest ID incremented everytime adding a row, and don't worry about the deletion. This way you can never have the same ID's

If you want to increment by name :
var hiddenInputs = document.getElementsByName("Q[]");
EDIT :
for (var i = 0; i <= hiddenInputs.length; i++) {
hiddenInputs[i].value = i + 1;
}
Decrement has the same logic. Now, value of the hiddenInput(DOM element) consist your row count

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?