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>
Related
I have a Bootstrap table with 2 columns which appears correctly as follows:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
<tr>
<td>Address One:</td>
<td><input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td>
</tr>
<tr>
<td>Address Two:</td>
<td><input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td>
</tr>
<tr>
<td>Suburb:</td>
<td><input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td>
</tr>
<tr>
<td>State:</td>
<td>
<select class="form-control shipmentState" name="shipToState" id="shipToState">
<option value=""></option>
<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="NT">NT</option>
<option value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>
</select>
</td>
</tr>
<tr>
<td>Postcode:</td>
<td><input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td>
</tr>
<tr>
<td>Country:</td>
<td>
<select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry">
<option value=""></option>
<option value="Australia">Australia</option>
<option value="Japan">Japan</option>
</select>
</td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td>
</tr>
</table>
I would now like to combine the State and Postcode so they appear on the same line as they don't require a lot of space each, but when I combine these they stretch outside of the other rows like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
<tr>
<td>Address One:</td>
<td><input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td>
</tr>
<tr>
<td>Address Two:</td>
<td><input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td>
</tr>
<tr>
<td>Suburb:</td>
<td><input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td>
</tr>
<tr>
<td>State:</td>
<td>
<select class="form-control shipmentState" name="shipToState" id="shipToState">
<option value=""></option>
<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="NT">NT</option>
<option value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>
</select>
</td>
<td>Postcode:</td>
<td><input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td>
</tr>
<tr>
<td>Country:</td>
<td>
<select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry">
<option value=""></option>
<option value="Australia">Australia</option>
<option value="Japan">Japan</option>
</select>
</td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td>
</tr>
</table>
and I can't work out how to keep the original width and combine the state/postcode into that original width.
I have tried this by adding colspan="2" in each element. So that each td takes a width of 2 columns in each row except State and Postcode row.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
<tr>
<td colspan="2">Address One:</td>
<td colspan="2"><input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td>
</tr>
<tr>
<td colspan="2">Address Two:</td>
<td colspan="2"><input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td>
</tr>
<tr>
<td colspan="2">Suburb:</td>
<td colspan="2"><input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td>
</tr>
<tr>
<td>State:</td>
<td>
<select class="form-control shipmentState" name="shipToState" id="shipToState">
<option value=""></option>
<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="NT">NT</option>
<option value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>
</select>
</td>
<td>Postcode:</td>
<td><input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td>
</tr>
<tr>
<td colspan="2">Country:</td>
<td colspan="2">
<select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry">
<option value=""></option>
<option value="Australia">Australia</option>
<option value="Japan">Japan</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">Phone:</td>
<td colspan="2"><input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td>
</tr>
</table>
Further to make it look better you can right-align the labels.
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 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
From this thread, I was suggested to use a nested table which in turn, performed the intended operation/function.
<table>
<thead class="center">
<tr>
<th>ID</th>
<th>L. Name</th>
<th>F. Name</th>
<th>M. Name</th>
<th>Sex</th>
<th>Empl. Status</th>
<th>Dept.</th>
<th>Modify</th>
</tr>
</thead>
<tbody>
<c:forEach var="professor" items="${facultyList}">
<tr>
<td>
<form action="savechanges" method="post">
<table>
<tr>
<td align="center">${professor.profId}</td>
<td>${professor.profLastName}</td>
<td>${professor.profFirstName}</td>
<td>${professor.profMiddleName}</td>
<td align="center">${professor.profSex}</td>
<td align="center">${professor.profEmplStatus}</td>
<td align="center">${professor.profDept}</td>
<td align="center">
<c:choose>
<c:when test="${professor.profEmplStatus.equals('FULL')}">
<select name="profEmplStatus" required>
<option value="FULL" selected>FULL</option>
<option value="PART">PART</option>
<option value="RET">RET</option>
<option value="TRMTD">TRMTD</option>
</select>
</c:when>
<c:when test="${professor.profEmplStatus.equals('PART')}">
<select name="profEmplStatus" required>
<option value="FULL">FULL</option>
<option value="PART" selected>PART</option>
<option value="RET">RET</option>
<option value="TRMTD">TRMTD</option>
</select>
</c:when>
<!-- more <c:when> -->
</c:choose>
</td>
<td align="center">
<c:choose>
<c:when test="${professor.profDept.equals('BSCS-SE')}">
<select name="profDept" required>
<option value="BA-MMA">BA-MMA</option>
<option value="BFDT">BFDT</option>
<option value="BS-AN">BS-AN</option>
<option value="BS-GPD">BS-GPD</option>
<option value="BSBA-FM">BSBA-FM</option>
<option value="BSBA-MKT">BSBA-MKT</option>
<option value="BSCS-SE" selected>BSCS-SE</option>
<option value="BSIT-WD">BSIT-WD</option>
<option value="GENED">GENED</option>
</select>
</c:when>
<c:when test="${professor.profDept.equals('GENED')}">
<select name="profDept" required>
<option value="BA-MMA">BA-MMA</option>
<option value="BFDT">BFDT</option>
<option value="BS-AN">BS-AN</option>
<option value="BS-GPD">BS-GPD</option>
<option value="BSBA-FM">BSBA-FM</option>
<option value="BSBA-MKT">BSBA-MKT</option>
<option value="BSCS-SE">BSCS-SE</option>
<option value="BSIT-WD">BSIT-WD</option>
<option value="GENED" selected>GENED</option>
</select>
</c:when>
<!-- more <c:when> -->
</c:choose>
</td>
<td class="center">
<input type="hidden" name="profId" value="${professor.profId}" />
<input type="submit" value="Save" />
</td>
</tr>
</table>
</form>
</td>
</tr>
</c:forEach>
</tbody>
</table>
The tables just appeared messed up though, as seen in this screenshot:
How to do it so it appears as originally intended?
The html is designed with nested tables which include a form tag inside a cell of the outer table. From the picture of the output in the browser you see that the nested table occupied the space belong to the first column. But you need both tables to have the same number of collumns. Count a number of columns in the nested table and use colspan attribute of <td> tag to spread a cell to occupy space dedicated to other columns of the outer table.
<td colspan="10" align="right" valign="top">
<form action="savechanges" method="post">
<table style="width:100%;" cellspacing="0" cellpadding="0" border="0">
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.