Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

add a new row and delete 1

Status
Not open for further replies.
kzn

kzn

MIS
Jan 28, 2005
209
GB
Hi

I am having a problem with this code. Its near to working in firefox but not in IE. I want to be able to add a row and then if it is not appropriate remove it. I have spent ages trying to figure this out. Any help would be appreciated thank you. Once I have this sorted I then need to add hidden input fields so that the data is captured. Thanks again

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#bgColor {
background-color:silver;
}
</style>
<script type="text/javascript">
idCount=1;
function addFresh(elem) {
idCount++;
tRows = document.getElementById(elem);
tr = tRows.insertRow(tRows.rows.length);
if(idCount%2 != 0) tr.setAttribute("id","bgColor");
td = tr.insertCell(tr.cells.length);
td.innerHTML = document.getElementById("first").value;
td = tr.insertCell(tr.cells.length);
td.innerHTML = document.getElementById("second").value;
td = tr.insertCell(tr.cells.length);
td.innerHTML = document.getElementById("third").value;
td = tr.insertCell(tr.cells.length);
var removeButton = document.createElement("input");
removeButton.setAttribute("type","button");
removeButton.setAttribute("id", idCount);
removeButton.setAttribute("value","Remove");
removeButton.setAttribute("onclick","deleteFresh("+idCount+")");
td.appendChild(removeButton);
}

function deleteFresh(eleme) {

alert(eleme);
document.getElementById("mine").deleteRow(eleme);
eleme = "";
}
</script>
</head>

<body>
<form name="form1" action="untitled5.php" method="get">
<table id="mine" cellspacing="0" cellpadding="3" border="0">
<tr>
<td width="199">fruit</td>
<td width="185">veg</td>
<td width="147">quality</td>
<td width="153"></td>
</tr>
<tr>
<td>
<select id="first" name="first">
<option></option>
<option value="Apple">Apple</option>
<option value="Strawberry">Strawberry</option>
<option value="Banana">Banana</option>
<option value="Grape">Grape</option>
<option value="Orange">Orange</option>
</select>
</td>
<td>
<select id="second" name="second">
<option></option>
<option value="Cabage">Cabage</option>
<option value="Carrot">Carrot</option>
<option value="Onion">Onion</option>
</select>
</td>
<td>
<select id="third" name="third">
<option></option>
<option value="Fresh">Fresh</option>
<option value="Good">Good</option>
<option value="Very Good">Very Good</option>
</select>
</td><div id="fourth"></div>
<td><input type="button" name="add" value="add" onclick="addFresh('veg')"/></td>
</tr>
<tbody id="veg"></tbody>
</table>


</form>
</body>
</html>
 
Sort by date Sort by votes
[1] Major changes.
[1.1]
> removeButton.setAttribute("onclick","deleteFresh("+idCount+")");
[tt] removeButton.onclick=function() {deleteFresh(this.parentNode.parentNode)};[/tt]
[1.2][tt]
function deleteFresh(eleme) {
elem.parentNode.removeChild(eleme);
}
[/tt]
[2] Minor point
[2.1]
[tt] removeButton.setAttribute("id", idCount);[/tt]
This sets the id to 1,2... I would suggest you consider append a non=numeric prefix, like id1, id2 ... or alike.
[tt] removeButton.setAttribute("id", "id"+idCount);[/tt]
[2.2] Properly restrict the scope of variables to local except idCount.
[2.3] After removable, the style would be mixed up. You've to do something above it.
 
Upvote 0 Downvote
Thank you very much tsuji.... its working. I thiink the style it going to be mission to sort out, so my plan is to use background for the table. Thanks again.
 
Upvote 0 Downvote
Thanks! Just so as to avoid other readers got confused, there is a typo in my post, you sure have detected and acted upon. The corresponding line should be read like this.
[tt] elem[red]e[/red].parentNode.removeChild(eleme);[/tt]
 
Upvote 0 Downvote
Hi

I have made some changes to the code, however firefox comes up with the following error (document.getElementById("edDegree") has no properties) when when trying to add a blank entry. I obviously dont want the blank entry to show but at the same time I am curious if there is away around the error. Thank you

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#bgColor {
background-color:silver;
}
</style>
<script type="text/javascript">
idEdCount=0;
function addEducation(elem) {

var edDegree = document.getElementById("edDegree").value;
var edUniversity = document.getElementById("edUniversity").value;
var edCountry = document.getElementById("edCountry").value;
var edGradYear = document.getElementById("edGradYear").value;

if((!edDegree.length) || (!edUniversity.length) || (!edCountry.length) || (!edGradYear.length)) {
return false;
}

idEdCount++;

tRows = document.getElementById(elem);
tr = tRows.insertRow(tRows.rows.length);
if(idEdCount%2 != 0) tr.setAttribute("id","bgColor");
td = tr.insertCell(tr.cells.length);
td.innerHTML = edDegree + "<input type='hidden' name='edDegree" + idEdCount + "' value='" + edDegree + "' />";
td = tr.insertCell(tr.cells.length);
td.innerHTML = edUniversity + "<input type='hidden' name='edUniversity" + idEdCount + "' value='" + edUniversity + "' />";
td = tr.insertCell(tr.cells.length);
td.innerHTML = edCountry + "<input type='hidden' name='edCountry" + idEdCount + "' value='" + edCountry + "' />";
td = tr.insertCell(tr.cells.length);
td.innerHTML = edGradYear + "<input type='hidden' name='edGradYear" + idEdCount + "' value='" + edGradYear + "' />";
td = tr.insertCell(tr.cells.length);
td.innerHTML = "<a class='link' href='#' onclick='deleteEducation(this.parentNode.parentNode)'>Remove</a>";
}

function deleteEducation(eleme) {
eleme.parentNode.removeChild(eleme);
}
</script>
</head>

<body>
<form name="form1" action="untitled5.php" method="get">
<table id="mine" cellspacing="0" cellpadding="3" border="0">
<tr>
<td width="199">degree</td>
<td width="185">university</td>
<td width="147">country</td>
<td width="153">graduation year</td>
<td width="153"></td>
</tr>
<tr>
<td><input type="text" name="edDegree" /></td>
<td><input type="text" name="edUniversity" /></td>
<td><select id="second" name="edCountry">
<option></option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="GreenLand">Greenland</option>
</select>
</td>
<td>
<select id="third" name="edGradYear">
<option></option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
</select>
</td><div id="fourth"></div>
<td><input type="button" name="add" value="add" onclick="addEducation('edSelected')"/> <input type="submit" name="submit" value="Submit" /></td>
</tr>
<tbody id="edSelected"></tbody>
</table>


</form>
</body>
</html>
 
Upvote 0 Downvote
[0] Form element's id should not be confronted with its name. They are both used as a means to reference the form element itself client-side but differently; and name has its own story server-side.

[1] Those edDegree etc are names of form elements, not their id. This is one way of how things got done.

[1.1] The add button element: careful not to name submit button "submit" (have more imagination, avoid using some keyword or commonly used controls words as name or id. Same as your class bgColor, you have plenty of words meaningful or quasi-meaningful, why choose that kind of name? and risk to break the script?)

><td><input type="button" name="add" value="add" onclick="addEducation('edSelected')"/> <input type="submit" name="submit" value="Submit" /></td>
[tt]<td><input type="button" name="add" value="add" onclick="addEducation([blue]this.form,[/blue]'edSelected')"/> <input type="submit" name="[red]someothernamethan[/red]submit" value="Submit" /></td>[/tt]

[1.2] The function addEducation modified.
[tt]
function addEducation([blue]obj,[/blue]elem) {

[blue]var edDegree = obj.edDegree.value;
var edUniversity = obj.edUniversity.value;
var edCountry = obj.edCountry.value;
var edGradYear = obj.edGradYear.value;[/blue]

if((!edDegree.length) || (!edUniversity.length) || (!edCountry.length) || (!edGradYear.length)) {
return false;
}

idEdCount++;

//etc etc...

}[/tt]
 
Upvote 0 Downvote
Hi Tsuji

Thank you for explaining things to me. I now understand.

Thank you :)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
610
malpa
malpa
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
551
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
602
AbidingDude
AbidingDude
TheLazyPig
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
146
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top