hi,

i'm new to JS. i'm having a problem with my jscript.
i'm using innerHTML to insert rows to table dynamicaly..

but when i do this .....
for example:
i have added a row and i filled it with data(e.g text box) and then i add a another row when i do that ... the filled data is erased...

pls gv a solution...

document.getElementById("element id").innerHTML += "table data";

are you using "=" instead of "+="?

but then it overwites the current row!!!

tableObj.innerHTML += "<tr id='"+sectionName+"_row_"+counters+"'><td>Rule "+counters+"<select name='rule["+sectionName+"][]'><option value='float'>float</option><option value='int'>int</option><option value='required'>required</option><option value='email'>email</option><option value='date'>date</option><br>Error "+counters+"<input type='text' name='error["+sectionName+"][]'><input type='button' class='querybutton' name="+counters+" value='Delete' onClick=\"removeInput('"+sectionName+"',"+counters+")\"/> </td></tr>";

but then it overwites the current row!!!

tableObj.innerHTML += "<tr id='"+sectionName+"_row_"+counters+"'><td>Rule "+counters+"<select name='rule["+sectionName+"][]'><option value='float'>float</option><option value='int'>int</option><option value='required'>required</option><option value='email'>email</option><option value='date'>date</option><br>Error "+counters+"<input type='text' name='error["+sectionName+"][]'><input type='button' class='querybutton' name="+counters+" value='Delete' onClick=\"removeInput('"+sectionName+"',"+counters+")\"/> </td></tr>";

I don't understand what you are saying but let me give you a simple example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function addtotable()
{
	var value = document.getElementById("txtAppend").value;
	document.getElementById("tblObject").innerHTML += "<tr><td>" + value + "</td></tr>";
	document.getElementById("txtAppend").select();
}
</script>
</head>

<body>
<table id="tblObject">
	<tr>
		<td>head</td>
	</tr>
</table>
<input type="text" name="txtAppend" id="txtAppend" />
<input type="button" onclick="addtotable();" value="Add to Table" />
</body>
</html>

this is the function..... i am using...

function AddInput(sectionName){
var rulesObj = document.getElementById(sectionName+"_rules");
var fChild = rulesObj.firstChild; 
var counters = 1;
var tblCore = "<tr id='"+sectionName+"_row_"+counters+"'><td>Rule "+counters+"<select name='rule["+sectionName+"][]'><option value='float'>float</option><option value='int'>int</option><option value='required'>required</option><option value='email'>email</option><option value='date'>date</option><br>Error "+counters+"<input type='text' name='error["+sectionName+"][]'><input type='button' class='querybutton' name="+counters+" value='Delete' onClick=\"removeInput('"+sectionName+"',"+counters+")\"/> </td></tr>";
			  
if( null != fChild && undefined != fChild.tagName && "TABLE" == fChild.tagName ){
var tableObj = document.getElementById(sectionName+"_input_table");
counters = tableObj.rows.length+1;
tblCore = fChild.innerHTML + "<tr id='"+sectionName+"_row_"+counters+"'><td>Rule "+counters+"<select name='rule["+sectionName+"][]'><option value='float'>float</option><option value='int'>int</option><option value='required'>required</option><option value='email'>email</option><option value='date'>date</option><br>Error "+counters+"<input type='text' name='error["+sectionName+"][]'><input type='button' class='querybutton' name="+counters+" value='Delete' onClick=\"removeInput('"+sectionName+"',"+counters+")\"/> </td></tr>";
}
rulesObj.innerHTML = "<table id="+sectionName+"_input_table>"+tblCore+"</table>";
				
}

html button is---
<input name="Add rule" type="button" class="querybutton" value="Add Rule" onclick="AddInput('course_name_type')" />

so i used the += but it didnt work!!!! it dosent create the line but it overwrites the firstly generated row...

plz help on this.. thank you in advance

This article has been dead for over six months. Start a new discussion instead.