We Keep Coding

Javascript code for adding rows in a table copies the data in the cell to new row

I am making a form that will be used in Internet Explorer. I have a table that has the capability to add rows dynamically. However, when you click the add row button it copies all of the data in the cell to the new row.
Anyone know a trick for this. Chrome works just fine.
<table id="divDocument" class="tftable" border="1">
<tr>
<td style="width:20px;"><INPUT type="checkbox" name="chk" /></td>
<td style="width:150px;"> <textarea id="txtDocument" class="textarea required" alt="Document/Item/Process" title="Document/Item/Process" style="border: none; width: 100%; height:100%;"></textarea></td>
</table>
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;
if(rowCount<=6){
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].innerHTML = "";
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;
}
}
} else{alert("Please submit another CCR with remaining items. Thanks!");}
}

You need to add textarea type and loop with your variable i:
<script>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;
if(rowCount<=6){
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
switch(newcell.childNodes[i].type) {
case "text":
newcell.childNodes[i].innerHTML = "";
break;
case "textarea":
newcell.childNodes[i].value = "";
break;
case "text":
newcell.childNodes[i].value = "";
break;
case "text":
newcell.childNodes[i].value = "";
break;
case "text":
newcell.childNodes[i].value = "";
break;
case "checkbox":
newcell.childNodes[i].checked = false;
break;
case "select-one":
newcell.childNodes[i].selectedIndex = 0;
break;
}
}
} else{alert("Please submit another CCR with remaining items. Thanks!");}
}</script>

how to call 2 function inside 1 input type

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);
if (i==2) {
newcell.innerHTML="<div id='txtHint"+xx+"'></div>";
}
else if(i==0){
newcell.innerHTML = "<INPUT type='checkbox' name='chk[]'/>";
}
else if (i==1) {
newcell.innerHTML = table.rows[1].cells[1].innerHTML;
switch(newcell.childNodes[0].type) {
case "select-one":
newcell.childNodes[0].setAttribute("onchange","showUser(this.value,"+xx+");showrole(this.value,"+xx+")");
}
}
else if (i==3) {
newcell.innerHTML="<div id='txtHintrole"+xx+"'></div>";
}
this is my function show select option depend on username i choose
after did some modification finally it work
and now i want to show role depend on username
so i have 2 show
1.for password
2.for username
onchange="showpassword(this.value)
this is my onchange inside select box
and now i want to showrole too
so when i choose the select
it will showed me password and role ad diferent cell
newcell.childNodes[0].setAttribute("onchange","showUser(this.value,"+xx+");showrole(this.value,"+xx+")");
and i foudn that i have tu put semi colon to devide the function
and i still show an error that the show only show role and it happen to 2 of them
it should showpassword and showrole when i select the value

You can use the innerHTML property of the cell.
Do something like
newcell.innerHTML = '<div id="txthint' + i + '">content</div>';
Hope this help

I need to dynamically add more fields to a form and have the new fields inputs values change as well

I have a jsfiddle here of the script I'm using to dynamically add rows to a field but have a problem.
On my form I have the 1st row that I want to duplicate with the script. The row consists of 6 inputs named job_date1, tech_name1, cost_code1, pay_rate1, total_hours1, and sub_total1.
When the second row is created via the script I now need the new rows input names to be set by the script if possible to job_date2, tech_name2, cost_code2 and so on and with each new row created I need the end digit to move up one.
Here is the code:
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;
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);
}
}

Here's a simple solution:
newcell.children[0].name = newcell.children[0].name + rowCount;
As you count each newly added row, add that variable to each of the input elements.
Here's the jsFiddle (be sure to check your console when you run the function to see the console log).
For the first log, it returns:
chk1
txt1
tech_name1
cost_code1
txt1
For the second element that's created
chk2
txt2
tech_name2
cost_code2
txt2
etc.

I have a simpler suggestion. Instead of having job_date1, job_date2, etc., name your fields job_date[] (all of the job date fields).
E.g. PHP automatically recognizes this and $_POST["job_date"] would be an array with all the values for job date in the order they appear on the html page. So instead of $_POST["job_date" . $i] you would use $_POST["job_date"][$i].
I don't know what technology you use for the backend, but I'm sure you can achieve the same effect.
It will be more robust and elegant and you don't have to care about re-numbering when you add nor remove rows.
Edit: More details about this technique in PHP can be found in PHP FAQ and Example #3 here.

Javascript add table in html page

I have an html page which includes a table. The following Javascript code a new table to my html page under the table that already exists each time I press the add new button. How can I modify this code so that the user will be able to add only 10 tables?
<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 "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
</SCRIPT>

I want to print the value from javascript

I am using javascript like this in a webpage.
<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[1].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].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;
}
}
}
</script>
you can see, there is 'i' is used in for loop.
Now I want to echo 'i' in php.
what is the way to echo $i?

you can use and you will see the result in firebug console or chrome debugger console
console.log(i);