This (http://jsfiddle.net/dPrXM/) is supposed to make two more fields appear when you click the more button, but it is unfortunately not working. I cannot for the life of me figure out why, but I am convinced that it's something very simple and probably pretty stupid.
monkeytherat 0 Newbie Poster
Recommended Answers
Jump to PostThis () is supposed to make two more fields appear when you click the more button, but it is unfortunately not working. I cannot for the life of me figure out why, but I am convinced that it's something very simple and probably pretty stupid.
@monkeytherat
Did you …
Jump to Posthave you tried
elem.style.display = "block"; instead of "tr"?
Jump to PostHai;
This code also works
<body> <style type="text/css"> table, th, td{ margin: 0; font: 16px helvetica, sans-serif; border: 1px solid black; } tr { display: block; } </style> <form name="teacher" method="post" action="teacher.php"> <table> <tr id="name"> <td> <label for="first_name">First Name</label> </td> <td> <input type="text" name="first_name"> </td> <td> <label …
Jump to Post@monkeytherat you are right. your script is working fine for me but not fiddle.
All 16 Replies
LastMitch
This () is supposed to make two more fields appear when you click the more button, but it is unfortunately not working. I cannot for the life of me figure out why, but I am convinced that it's something very simple and probably pretty stupid.
@monkeytherat
Did you write code?
monkeytherat 0 Newbie Poster
Yes, it is in the javascript window.
LastMitch
Yes, it is in the javascript window.
@monkeytherat
You used this instead:
http://viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/
I'm not going to modify the code for you. You are missing some lines, that's why the two more fields doesn't add on when you click the button.
monkeytherat 0 Newbie Poster
Sorry, I don't understand what you are saying. The link you sent me isn't quite what I'm looking for which is in part why I wrote my own. I don't want to deal with creating and deleting elements, jsut making them visible / invisible.
LastMitch
The link you sent me isn't quite what I'm looking for which is in part why I wrote my own. I don't want to deal with creating and deleting elements, jsut making them visible / invisible.
@monkeytherat
This what you wrote in your first paragraph:
This () is supposed to make two more fields appear when you click the more button.
You didn't explain it well regarding about visible/invisible nor what you post in the first paragraph?
Have you try this:
http://www.javascriptkit.com/javatutors/dom3.shtml#.Ukc1XIbYdHM
that is how to display visible/invisible things.
Is that what you want?
monkeytherat 0 Newbie Poster
Sorry for being unclear. What I am trying to do is make it so that when I press the button, the first pair of input fields that is not visible (i.e. display = none) should become visible (i.e. display = tr). I tried to just loop through the elements and find the first one that is invisible and then change its visibility, but that seems not to be working for some reason. I was just looking for an explanation as to what is wrong with my code since I am new to javascript and from similar examples I have seen, nothing appears to be wrong.
LastMitch
I was just looking for an explanation as to what is wrong with my code since I am new to javascript and from similar examples I have seen, nothing appears to be wrong.
I don't understand your code clearly.
function display(){
for (var i = 1; i < 8; i++){
var id = "courses" + i.toString();
if (document.getElementById(id).style.display == "none"){
var elem = document.getElementById(id);
elem.style.display = "tr";
break;
}
}
}
If you want to display an element and make it visible & then invisible then used a statement.
When you used a loop, it shows that you want to add the rows.
If you want to add rows after you click the button, then those 2 rows will appear after each click.
That's the reason why I ask what you are trying to do?
monkeytherat 0 Newbie Poster
I use the loop to go through the rows and choose the first one that is invisible, then make it visible and break the loop.
monkeytherat 0 Newbie Poster
Anyone?
Troy III 272 Posting Pro
have you tried elem.style.display = "block"; instead of "tr"?
monkeytherat 0 Newbie Poster
Yes, it unfortunately did not work :/
Bachu 45 Newbie Poster
Hai;
This code also works
<body>
<style type="text/css">
table, th, td{
margin: 0;
font: 16px helvetica, sans-serif;
border: 1px solid black;
}
tr {
display: block;
}
</style>
<form name="teacher" method="post" action="teacher.php">
<table>
<tr id="name">
<td>
<label for="first_name">First Name</label>
</td>
<td>
<input type="text" name="first_name">
</td>
<td>
<label for="last_name">Last Name</label>
</td>
<td>
<input type="text" name="last_name">
</td>
</tr>
<tr>
<td>
<label for="course1">Course 1</label>
</td>
<td>
<input type="text" name="course1">
</td>
<td>
<label for="course2">Course 2</label>
</td>
<td>
<input type="text" name="course2">
</td>
</tr>
<tr id="courses1" style="display:none;" >
<td>
<label for="course3">Course 3</label>
</td>
<td>
<input type="text" name="course2">
</td>
<td>
<label for="course4">Course 4</label>
</td>
<td>
<input type="text" name="course4">
</td>
</tr>
<tr id="courses2" style="display:none;" >
<td>
<label for="course5">Course 5</label>
</td>
<td>
<input type="text" name="course5">
</td>
<td>
<label for="course6">Course 6</label>
</td>
<td>
<input type="text" name="course6">
</td>
</tr>
<tr id="courses3" style="display:none;">
<td>
<label for="course7">Course 7</label>
</td>
<td>
<input type="text" name="course7">
</td>
<td>
<label for="course8">Course 8</label>
</td>
<td>
<input type="text" name="course8">
</td>
</tr>
<tr id="courses4" style="display:none;">
<td>
<label for="course9">Course 9</label>
</td>
<td>
<input type="text" name="course9">
</td>
<td>
<label for="course10">Course 10</label>
</td>
<td>
<input type="text" name="course10">
</td>
</tr>
<tr id="courses5" style="display:none;">
<td>
<label for="course11">Course 11</label>
</td>
<td>
<input type="text" name="course11">
</td>
<td>
<label for="course12">Course 12</label>
</td>
<td>
<input type="text" name="course12">
</td>
</tr>
<tr id="courses6" style="display:none;">
<td>
<label for="course13">Course 13</label>
</td>
<td>
<input type="text" name="course13">
</td>
<td>
<label for="course14">Course 14</label>
</td>
<td>
<input type="text" name="course14">
</td>
</tr>
<tr id="courses7" style="display:none;">
<td>
<label for="course15">Course 15</label>
</td>
<td>
<input type="text" name="course15">
</td>
<td>
<label for="course16">Course 16</label>
</td>
<td>
<input type="text" name="course16">
</td>
</tr>
<tr>
<td>
<button onclick="display();" type="button" id="moreBtn">More</button>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
function display(){
for (var i = 1; i < 8; i++){
var id = "courses" + i.toString();
if (document.getElementById(id).style.display == "none"){
var elem = document.getElementById(id);
elem.style.display = "block";
break;
}
}
}
</script>
</body>
OR
I did this with another methode. Please check the example below.
<body>
<style type="text/css">
table, th, td{
margin: 0;
font: 16px helvetica, sans-serif;
border: 1px solid black;
}
tr {
display: block;
}
</style>
<form name="teacher" method="post" action="teacher.php">
<table>
<tr id="name">
<td>
<label for="first_name">First Name</label>
</td>
<td>
<input type="text" name="first_name">
</td>
<td>
<label for="last_name">Last Name</label>
</td>
<td>
<input type="text" name="last_name">
</td>
</tr>
<tr>
<td>
<label for="course1">Course 1</label>
</td>
<td>
<input type="text" name="course1">
</td>
<td>
<label for="course2">Course 2</label>
</td>
<td>
<input type="text" name="course2">
</td>
</tr>
<tr id="courses1" style="display:none;" >
<td>
<label for="course3">Course 3</label>
</td>
<td>
<input type="text" name="course2">
</td>
<td>
<label for="course4">Course 4</label>
</td>
<td>
<input type="text" name="course4">
</td>
</tr>
<tr id="courses2" style="display:none;" >
<td>
<label for="course5">Course 5</label>
</td>
<td>
<input type="text" name="course5">
</td>
<td>
<label for="course6">Course 6</label>
</td>
<td>
<input type="text" name="course6">
</td>
</tr>
<tr id="courses3" style="display:none;">
<td>
<label for="course7">Course 7</label>
</td>
<td>
<input type="text" name="course7">
</td>
<td>
<label for="course8">Course 8</label>
</td>
<td>
<input type="text" name="course8">
</td>
</tr>
<tr id="courses4" style="display:none;">
<td>
<label for="course9">Course 9</label>
</td>
<td>
<input type="text" name="course9">
</td>
<td>
<label for="course10">Course 10</label>
</td>
<td>
<input type="text" name="course10">
</td>
</tr>
<tr id="courses5" style="display:none;">
<td>
<label for="course11">Course 11</label>
</td>
<td>
<input type="text" name="course11">
</td>
<td>
<label for="course12">Course 12</label>
</td>
<td>
<input type="text" name="course12">
</td>
</tr>
<tr id="courses6" style="display:none;">
<td>
<label for="course13">Course 13</label>
</td>
<td>
<input type="text" name="course13">
</td>
<td>
<label for="course14">Course 14</label>
</td>
<td>
<input type="text" name="course14">
</td>
</tr>
<tr id="courses7" style="display:none;">
<td>
<label for="course15">Course 15</label>
</td>
<td>
<input type="text" name="course15">
</td>
<td>
<label for="course16">Course 16</label>
</td>
<td>
<input type="text" name="course16">
</td>
</tr>
<tr>
<td>
<button onclick="display(index);" type="button" id="moreBtn">More</button>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
var index=0;
function display(val) {
index = val+1;
document.getElementById("courses"+index).style.display="block";
if(index>=7) document.getElementById("moreBtn").style.display="none";
}
</script>
</body>
designershiv 1 Newbie Poster
This can simply done using jQuery correct me if am wrong
monkeytherat 0 Newbie Poster
@Bachov Neither of those methods works :/
@designershiv Possibly, but I don't know jQuery. I don't see why this can't be done with my simple 8 or so line function, though, no need to get into jQuery.
monkeytherat 0 Newbie Poster
Can no one really help with this? It seems like it should be trivial...
designershiv 1 Newbie Poster
@monkeytherat you are right. your script is working fine for me but not fiddle.
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.