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
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 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 have a table with 3 rows.
I decided to split each row into 4 columns even though the most TDs a row will have is two.
So, the top row with one TD, has a colspan of 4.
the next row has two TDs, the first with a colspan of 1, the second with a colspan of 3.
the third row has two TDs, each with a colspan of 2.
here is the HTML:
<table class="img">
<tbody>
<tr>
<td colspan="4" class="ttBtn"><hr></td>
</tr>
<tr>
<td colspan='1'>
<select id="moveShifts">
<option val="1">1st Shift</option>
<option val="2">2nd Shift</option>
<option selected="" val="3">3rd Shift</option>
</select>
</td>
<td colspan='3' style='display:block' dept="3">
<select id="moveDepts">
<option val="139">CO-MAIL 1</option>
<option val="140">CO-MAIL 2</option>
<option val="599">FORKLIFT</option>
<option val="665">LEAD TEMP</option>
<option selected="" val="666">OPERATOR</option>
<option val="16">PAMS-CTLMAIL</option>
<option val="463">PAMS-CTLMAIL GEN LAB ** DO NOT USE **</option>
<option val="141">PAMS-CTLPAL</option>
<option val="540">POLY BAG</option>
<option val="485">RECEIVING</option>
</select>
</td>
</tr>
<tr>
<td colspan='2'>
<input type="button" value="Update Punch Record" class="ttBtn" disabled='true' id="ttUpd">
</td>
<td colspan='2'>
<input type="button" value="Delete Punch Record" class="ttBtn" id="ttDel">
</td>
</tr>
</tbody>
</table>
It looks like the second button on the bottom row won't shift left any closer the the right end of the select element above it.
Can anyone tell me what I need to do to fix this?
Here is a link to the code on JSFiddle - http://jsfiddle.net/Joth/TdVAd/2/
Thanks!
Try this below code...
<tr>
<td colspan='4'>
<input type="button" value="Update Punch Record" class="ttBtn" disabled='true' id="ttUpd">
<input type="button" value="Delete Punch Record" class="ttBtn" id="ttDel">
</td>
</tr>
The main problem is 'display:block;' in TD element (if you add border to table, you show it):
<td colspan="3" style='display:table-cell' dept="3">
You can use tag COLGROUP and set width at tag COL, for example:
<table class="img">
<colgroup><col width="25%" /><col width="25%" /><col width="25%" /><col width="25%" /></colgroup>
live demo: http://jsfiddle.net/Magicianred/T9Ru5/4/
Enjoy your code
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>