Table - Update cell on current row - html

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>

Related

Tables inside a form - placing elements vertically instead of horizontally

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>

HTML table row extending based on second row

I have 2 rows in a HTML table. The first column in the first row spans based on the second column(This is Volvo This is Volvo) in the second row.
I want both the rows spanning independently based on the default value/size.
https://jsfiddle.net/p457mcdx/
HTML code:
<table>
<tr>
<td>
<input type="text" placeholder='firstname'>
</td>
<td>
<input type="text" placeholder='Lastname'>
</td>
</tr>
<tr>
<td>
<select>
<option value="volvo">This is a Volvo This is a Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
</tr>
</table>
You can set a width on the select trough CSS
select{
max-width: 100px; /* or width: 100px */
}
So that it doesn't span table columns.
EDIT: Example
I'm not sure if you want this:
<table>
<tr>
<td>
<input type="text" placeholder='firstname'>
</td>
<td>
<input type="text" placeholder='Lastname'>
</td>
</tr>
<tr>
<td colspan="2">
<select style="width:100%">
<option value="volvo">This is a Volvo This is a Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
</tr>
</table>
If you don't want your select with 100% width, just remove the style attribute

Add a drop down in a table using HTML

I am trying to add a drop down box in a table as a part of registration form.
Here is my code below :-
<html>
<body></body>
<h1>Cab</h1>
<TABLE BORDER="0">
<TR>
<TD>Name</TD>
<TD ALIGN="left"><INPUT TYPE="text" SIZE="25" NAME="fname">
</TD>
</TR>
<TR>
<TD>Phone Number</TD>
<TD ALIGN="left"><INPUT TYPE="text" SIZE="25" NAME="phnnum">
</TD>
</TR>
<TR>
<TD class = "select">Online Password (Repeated)
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<TD ALIGN="center"></TD>
</TD>
</TR>
</TABLE>
<INPUT TYPE="submit" VALUE="Submit">
<INPUT TYPE="reset" VALUE="Clear">
</html>
When I do this the drop down box doesn't come in a format as the other fields come.
I want the drop down box right below the Text Field above it.
its because you have put "Online Password (Repeated)" text and drop down in a same column td
and the second TD is blank..
<TR>
<TD class = "select">Online Password (Repeated)
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<TD ALIGN="center"></TD>
</TD>
</TR>
replace above code with below
<TR>
<TD class = "select">Online Password (Repeated)
</TD>
<TD ALIGN="center">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</TD>
</TR>
I hope u can now find where u made mistake
check the jsfiddle
<html>
<body>
<h1>Cab</h1>
<TABLE BORDER="0">
<TR>
<TD>Name</TD>
<TD ALIGN="left">
<INPUT TYPE="text" SIZE="25" NAME="fname">
</TD>
</TR>
<TR>
<TD>Phone Number</TD>
<TD ALIGN="left">
<INPUT TYPE="text" SIZE="25" NAME="phnnum">
</TD>
</TR>
<TR>
<TD>Online Password (Repeated)</TD>
<TD ALIGN="left">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</TD>
</TR>
</TABLE>
<INPUT TYPE="submit" VALUE="Submit">
<INPUT TYPE="reset" VALUE="Clear">
</body>
</html>

<td> doesn't work with <select>

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>

Aligning table with an image HTML

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.