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