I'm having a weird problem.
Here's my code :-
<table>
<tr>
<td>Ports to be opened(<em><small>Shift Select Multiple Options</em></small>:</td>
</tr>
<td><select name="portoptions[]" multiple="multiple"></td>
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="protocol">Protocol</option>
</select>
</table>
The problem :- The options doesn't get listed down, it's completely blank..show's nothing.
How do I fix it so that options are viewable as well ?
Thanks.
Your <td> closes before the select does. The <select> should be nested inside your <td>.
E.g.
<td>
<select name="portoptions[]" multiple="multiple">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="protocol">Protocol</option>
</select>
</td>
two issues are here.
1. You should put </td> after </select>.
2. You should put one <tr> before <td>.
So your final code will be
<table>
<tr>
<td>Ports to be opened(<em><small>Shift Select Multiple Options</em></small>:</td>
</tr>
<tr>
<td>
<select name="portoptions[]" multiple="multiple">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="protocol">Protocol</option>
</select>
</td>
</tr>
</table>
use,
<table>
<td>Ports to be opened(<em><small>Shift Select Multiple Options</em></small>:</td>
</tr>
<tr>
<td><select name="portoptions[]" multiple="multiple">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="protocol">Protocol</option>
</select></td>
</tr>
Replace:
<td><select name="portoptions[]" multiple="multiple"></td>
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="protocol">Protocol</option>
</select>
To:
<td>
<select name="portoptions[]" multiple="multiple">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="protocol">Protocol</option>
</select>
</td>
All the control must be ended before closing the </td>
By writing in your way, browser doesn't know about the options.
So you need to write in between <td> <select><option>...</option></select></td>
by writing on the above way your code looks like,
<td>
<select name="portoptions[]" multiple="multiple">
<option value="TCP">TCP</option>
<option value="UDP">UDP</option>
<option value="protocol">Protocol</option>
</select>
</td>
Related
I am trying to update cell 1 of current row with the value from Select.
I know if I change the $(this).closest('tr') with a number, it will affect that row, but it would not trigger for that current row.
function currentrow(number) {
document.getElementById('mytable').rows[$(this).closest('tr')].cells[1].innerHTML = number;
}
<table id="mytable">
<tr>
<td>
<select name="column()" onchange="currentrow(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<select name="column()" onchange="currentrow(this.value)">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
</td>
<td>
2
</td>
</tr>
</table>
I hope following Answers Will help you
function currentrow(element) {
element.parentNode.nextElementSibling.innerHTML = element.value;
}
<table id="mytable">
<tr>
<td>
<select name="column()" onchange="currentrow(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<select name="column()" onchange="currentrow(this)">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
</td>
<td>
2
</td>
</tr>
</table>
Detail View
Here I split above mentioned JS code into multiple line.
function currentrow(element) {
var selectedValue = element.value, // get selected value
parentCell = element.parentNode, // get parent td element
nextTargetCell = parentCell.nextElementSibling; // get next td element
// set next td element value with selected value
nextTargetCell.innerHTML = selectedValue;
}
<table id="mytable">
<tr>
<td>
<select name="column()" onchange="currentrow(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<select name="column()" onchange="currentrow(this)">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
</td>
<td>
2
</td>
</tr>
</table>
I'm working on an assignment in which the desired output is something along the lines of:
I have been told we are to use a table to do this.
Mine (yet to apply any CSS) looks like:
My code looks like this:
<table>
<tr>
<td>
<table border="0">
<td>
<select name="Continent">
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value="Asia">Asia</option>
</select>
</td>
<td>
<select name="Country">
<option value="Canada">Canada</option>
<option value="Other">Other</option>
</select>
</td>
<td>
<select name="City">
<option value="Ottawa">Ottawa</option>
<option value="New York">New York</option>
<option value="Sydney">Sydney</option>
</select>
</td>
</table>
</td>
<td>
<table>
<td>Checkboxes</td>
</table>
</td>
</tr>
</table>
So I guess my question is: How do I get the drop-down lists to stack vertically? I have tried putting them in their own <tr> elements, but that does nothing, it just changes the spacing between them slightly.
Do I need to go with the two table approach with two tables within a table?
Is this done in CSS, or do I have to get it somewhat right in html first?
do you mean like this?
<table border="1px solid">
<tr>
<td><select name="Continent">
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value="Asia">Asia</option>
</select></td>
<td rowspan="3">Chexbox</td>
</tr>
<tr>
<td><select name="Country">
<option value="Canada">Canada</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr>
<td><select name="City">
<option value="Ottawa">Ottawa</option>
<option value="New York">New York</option>
<option value="Sydney">Sydney</option>
</select></td>
</tr>
</table>
I am having to create a contacts list for my team to implement on our website and since there are a large number of contacts, I would like to have only a single table cell with a drop down menu and once clicked, it will populate the other cells next to it with the respected information based on the selection.
I am very new to HTML so I am not even sure how to make the dropdown work.
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" style="text-align:center;">
<thead>
<tr>
<th>Department</th>
<th>Division</th>
<th>Number</th>
<th>CTI</th>
<th>Email</th>
</tr>
</thead>
<tbody style="overflow-y:scroll; height:200px;">
<tr>
<td class="select">
<select>
<option value="department">Department</option>
<option value="saab">Division</option>
<option value="number">Number</option>
<option value="cti">CTI</option>
<option value="email">Email</option>
</select>
</td>
<td class="select">
<select>
<option value="billing">billing</option>
<option value="retention">retention</option>
<option value="sales">sales</option>
<option value="support">support</option>
<option value="management">management</option>
</select>
</td>
<td>
Number
</td>
<td>
CTI
</td>
<td>
Email
</td>
</tr>
</tbody>
</table>
</div>
So far the answer I got below doesn't quite do what I am looking for.
Below I have added a picture of what my table looks like with CSS and I would like to have the first two cells populate the Department and its division. The other cells will populate themselves based on the selections of the first two:
Trying this
<tr>
<td>
<select>
<option value="department-1">Department</option>
<option value="department-2">Department</option>
<option value="department-3">Department</option>
<option value="department-4">Department</option>
<option value="department-5">Department</option>
</select>
</td>
<td>
<select>
<option value="division-1">Division</option>
<option value="division-2">Division</option>
<option value="division-3">Division</option>
<option value="division-4">Division</option>
<option value="division-5">Division</option>
</select>
</td>
</tr>
And just keep adding
I am trying to align a table next to image, which has text aligned with it currently. I want to have the dropdowns align with the lower edge of the image, can anyone assist me with this? Here is my code.
<input type="image" src="image.jpg" name="tee" width="180" height="180" ALIGN="center">xxxxxx
<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr>
<tr>
<td><select name="os0">
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select> </td>
<td><select name="os1">
<option value="S">S </option>
<option value="M">M </option>
<option value="L">L </option>
<option value="XL">XL </option>
</select> </td>
</tr>
Based on your description, this is the best I could come up with using CSS to style it.
<style>
div {height: 180px;
width: 300px;}
#image {
float:left;
}
table { float:right;
margin-top: 130px;
}
</style>
<div>
<input id="image" type="image" src="image.jpg" name="tee" width="180" height="180" ALIGN="center">
<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr>
<tr>
<td><select name="os0">
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select> </td>
<td><select name="os1">
<option value="S">S </option>
<option value="M">M </option>
<option value="L">L </option>
<option value="XL">XL </option>
</select> </td>
</tr></table></div>
But you can also fix the issue by using a table and then vertically aligning the contents of the second cell in the row to the bottom.
<table><tr><td>
<input id="image" type="image" src="image.jpg" name="tee" width="180" height="180" ALIGN="center"></td>
<td valign="bottom"> <!-- This line right here is what does the trick -->
<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr>
<tr>
<td><select name="os0">
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select> </td>
<td><select name="os1">
<option value="S">S </option>
<option value="M">M </option>
<option value="L">L </option>
<option value="XL">XL </option>
</select> </td>
</tr></table>
</td></tr>
</table>
hope this helps!
Maybe you should go for the CSS3 , It has a lot properties like left , right or top .
I do not know css completely but their are a lot of tutorials on the internet.
I am trying to align two text fields for a t-shirt website, I would like the select fields to be side-by-side and they appear on top of each other. Any help would be appreciated.
<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td></tr><tr><td><select name="os0">
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="Size">Size</td></tr><tr><td><select name="os1">
<option value="S">S </option>
<option value="M">M </option>
<option value="L">L </option>
<option value="XL">XL </option>
</select> </td></tr>
</table>
You mixed up the use of <tr> and <td>. The way I always remember is <tr> is TABLE ROW ... Rows are always horizontal and columns hold things, like Greek Towers, up vertically. Hope this helps.
<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr>
<tr>
<td><select name="os0">
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select> </td>
<td><select name="os1">
<option value="S">S </option>
<option value="M">M </option>
<option value="L">L </option>
<option value="XL">XL </option>
</select> </td>
</tr>
</table>