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...

Recommended Answers

All 6 Replies

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

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

i'm using '='

"=" overwrites and "+=" appends.

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.