give space between particular <td> elements in a table - javascript

i have two html table's inside a main table. I have to give the space between td of first table so that Heading one should be on top of Element1 and text box and Heading two should be on top of Element2 and select lists which are available in other table. Please suggest how can i achieve this, do i need to modify the html table structure.
Please find the fiddle:https://jsfiddle.net/x5tLdbz4/1/
Below is the css code:
td:nth-child(1) {
padding-right: 90px;
}
HTML code:
<table>
<table>
<tr>
<td class="hone" class="more-padding-on-right">
Heading One
</td>
<td class="htwo">
Heading Two
</td>
</tr>
</table>
<table>
<tr valign="top">
<td> Element1:<input id="myTest" type="text" value=""> </td>
<td>
Element2:<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
>>
</td>
<td>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</table>
</table>


I would merge the two tables into one, with colspan values.
Another correction, it should be valign="middle" not center.
http://jsfiddle.net/w8kvm0d9/
.hone, .htwo {
background-color: #EEEEEE;
font-weight:bold;
color:red;
font-size:12px;
height:15px;
}
td {
border: 1px solid silver;
}
td:nth-child(2) {
border: 0;
width: 80px;
}
td select {
vertical-align: top;
}
<table>
<tr>
<td class="hone" class="more-padding-on-right">Heading One</td>
<td> </td>
<td class="htwo" colspan="3">Heading Two</td>
</tr>
<tr>
<td valign="top">Element1:<input id="myTest" type="text" value=""/></td>
<td> </td>
<td valign="top">
Element2:
<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="middle">>></td>
<td valign="top">
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</table>


I would recommend putting everything into a single table. When you have two separate tables but you want to the columns to align you'll find it nearly impossible to ensure that they always do (especially when a user resizes the browser window). You could also add <thead> and <tbody> tags to distinguish between the header rows and body rows. Also, since you've got 3 columns in the second table you'll need to use the colspan attribute for the second column of the header to tell it span 2 columns, thus allowing the columns to fit in (or, if I didn't understand the alignment you want you might need the colspan on the first header column instaed).
<table>
<thead>
<tr>
<th class="hone" class="more-padding-on-right">
Heading One
</th>
<th class="htwo" colspan="2">
Heading Two
</th>
</tr>
</thead>
<tbody>
<tr valign="top">
<td> Element1:<input id="myTest" type="text" value=""> </td>
<td>
Element2:<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
>>
</td>
<td>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</tbody>
</table>


you can use one table structure and it'll look something like this:
http://jsfiddle.net/swm53ran/267/
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Element 1<input type="text"/>
</td>
<td>
Element 2
<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
>>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</tbody>
</table>


A better way (if sticking with tables) is to use a single table for this:
<table>
<tr>
<td class="hone" class="more-padding-on-right">Heading One</td>
<td class="htwo">Heading Two</td>
<td></td>
<td class="hthree">Heading Three</td>
</tr>
<tr valign="top">
<td>Element1:
<input id="myTest" type="text" value="">
</td>
<td>Element2:
<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
>>
</td>
<td>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</table>
https://jsfiddle.net/rcj1xgur/3/

Related

Bootstrap - Table Column Widths Not Sizing Correctly

I have a Bootstrap 4 table which shows existing data as well as a row at the bottom to enter another line and submit that. I've setup fixed column widths in the header row but these are not being respected when the table is rendered.
Here's an example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th style="width:20%">No</th>
<th style="width:30%">Name</th>
<th style="width:5%">Phase</th>
<th style="width:15%">Name</th>
<th style="width:5%">Day</th>
<th style="width:5%">Time</th>
<th style="width:5%">Totals</th>
<th style="width:10%">Notes</th>
<th style="width:5%">Action</th>
</tr>
</thead>
<tbody>
<tr id="1956253">
<td>2368941257</td>
<td>London Gateway</td>
<td>23/B</td>
<td>Planning</td>
<td>Mon</td>
<td>7</td>
<td>7</td>
<td>lorem ipsum</td>
<td>N/A</td>
</tr>
<tr>
<td>
<select name="projectNumber" required>
<option value=""></option>
<option value="365541254">365541254</option>
<option value="874521147">874521147</option>
<option value="3456467456">3456467456</option>
</select>
</td>
<td id="ProjectName"></td>
<td id="ProjectPhases"></td>
<td></td>
<td>
<select name="Date" required>
<option value=""></option>
<option value="Mon">Mon</option>
<option value="Tue">Tue</option>
<option value="Wed">Wed</option>
<option value="Thu">Thu</option>
<option value="Fri">Fri</option>
<option value="Sat">Sat</option>
<option value="Sun">Sun</option>
</select>
</td>
<td><input type="text" name="Time" required></td>
<td></td>
<td><input type="text" name="Notes"></td>
<td></td>
</tr>
<tr>
<td colspan="9">
<button type="reset" class="btn">Reset</button>
<button type="submit" class="btn btn-success">Save</button>
</td>
</tr>
</tbody>
</table>
For example the Time column should only be 5% of the width but is taking up much more space. Nothing I've tried has been able to get the specified widths to be respected here.

Well, you gave width to the ths but not the trs - Also, the input field inside the cell is much wider so the entire column gets wider to accommodate.
You could use specific classes for each width to avoid repeating styles.
See demo below
.w-5{
width: 5%;
}
.w-10
width: 10%;
}
.w-15{
width: 15%;
}
.w-20{
width: 20%;
}
.w-30{
width: 30%;
}
.w-5 input{
width:100%;
}
.w-20 select{
width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th class="w-20">No</th>
<th class="w-10">Name</th>
<th class="w-5">Phase</th>
<th class="w-15">Name</th>
<th class="w-5">Day</th>
<th class="w-5">Time</th>
<th class="w-5">Totals</th>
<th class="w-10">Notes</th>
<th class="w-5">Action</th>
</tr>
</thead>
<tbody>
<tr id="1956253">
<td>2368941257</td>
<td>London Gateway</td>
<td>23/B</td>
<td>Planning</td>
<td>Mon</td>
<td>7</td>
<td>7</td>
<td>lorem ipsum</td>
<td>N/A</td>
</tr>
<tr>
<td class="w-20">
<select name="projectNumber" required>
<option value=""></option>
<option value="365541254">365541254</option>
<option value="874521147">874521147</option>
<option value="3456467456">3456467456</option>
</select>
</td>
<td id="ProjectName"></td>
<td id="ProjectPhases"></td>
<td></td>
<td>
<select name="Date" required>
<option value=""></option>
<option value="Mon">Mon</option>
<option value="Tue">Tue</option>
<option value="Wed">Wed</option>
<option value="Thu">Thu</option>
<option value="Fri">Fri</option>
<option value="Sat">Sat</option>
<option value="Sun">Sun</option>
</select>
</td>
<td class="w-5"><input class="time" type="text" name="Time" required></td>
<td></td>
<td><input type="text" name="Notes"></td>
<td></td>
</tr>
<tr>
<td colspan="9">
<button type="reset" class="btn">Reset</button>
<button type="submit" class="btn btn-success">Save</button>
</td>
</tr>
</tbody>
</table>

how to select values in the dropdown box

this is my code .
if i select tamilnadu , i must get chennai.
if i select kerla i must get kochi.
how to get the values if i submit.
enter code here
<td align='center' >STATE:</td>
<td> <select name ='state' onchange="showData()">
<option value="0">Select</option>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</td>
</tr>
<tr> <td> </td> </tr>
<tr>
<td align='center' name ='city'>city:</td>
<td> <select>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore<option>
</tr>

You can go with the correct tag formation like this:
jQuery
$('#state').change(function() {
$('#res').html($('#city option').eq($('#state option:selected').index()).val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tr>
<td align='center'>STATE:</td>
<td>
<select name='state' id='state'>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</select>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align='center' name='city'>city:</td>
<td>
<select name='city' id='city'>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore
<option>
</select>
</tr>
<br>
<br>RESULT : <span id='res'></span>
Javascript:
function listResult() {
var e = document.getElementById("state");
document.getElementById("res").innerHTML = document.getElementById("city").options[e.selectedIndex].value
}
<tr>
<td align='center'>STATE:</td>
<td>
<select name='state' id='state' onchange='listResult()'>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</select>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align='center' name='city'>city:</td>
<td>
<select name='city' id='city'>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore
<option>
</select>
</tr>
<br>
<br>RESULT : <span id='res'></span>

JSP multiple checkbox unable to capture multiple row values in a dynamic table

<input type="submit" id="Display" name="Display" value="Display" />
<br/><br/>
<input type="submit" id="Update" name="Update" value="Update" />
<br/><br/>
<table border=1 width=90% height=30% align=center cellpadding=1 cellspacing=1>
<tr>
<th>Select</th>
<th>Name</th>
<th>Current Value</th>
<th>New Value</th>
</tr>
<c:forEach items="${abc}" var="map">
<tr>
<td align="center"><input type="checkbox" id="selectedItems" value="${map.key}" name="selectedItems" />
</td>
<td align="center">${map.key}</td>
<td align="center">${map.value}</td>
<td align="center">
<select name="val" id="val" >
<option value="">Select New Value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</c:forEach>
</table>
I am constructing a dynamic table based upon the values I get in map object 'abc' on click of Display Button. Now the next step is to check one or more rows and update them by selecting a new value from dropdown. How can I capture the ${map.key} and the selected new value per row in a new map on click of 'Update'? I am able to capture the checked ${map.key} but not the corresponding selected new value from dropdown. Any help would be appreciated.

This will do i believe..!!
<c:forEach items="${abc}" var="map" varStatus="rowNumber">
<tr>
<td align="center"><input type="checkbox" id="selectedItems${rowNumber.index}" value="${map.key}" name="selectedItems[${rowNumber.index}]" />
</td>
<td align="center">${map.key}</td>
<td align="center">${map.value}</td>
<td align="center">
<select name="val" id="val" >
<option value="">Select New Value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</c:forEach>
The idea is that you must use some array for storing value for each
checkbox. By giving the name as selectedItems[${rowNumber.index}]
you can save the value of first checkbox at selectedItems[0], 2nd
at 1 etc. All you need to do is to create an array inside the bean an
create getters and setters.
varStatus="rowNumber" is used to get the current iteration index,
like i in the for loop. You can use this index to differentiate each
row.

<input type="submit" id="Display" name="Display" value="Display" />
<br/><br/>
<input type="submit" id="Update" name="Update" value="Update" />
<br/><br/>
<table border=1 width=90% height=30% align=center cellpadding=1 cellspacing=1>
<tr>
<th>Select</th>
<th>Name</th>
<th>Current Value</th>
<th>New Value</th>
</tr>
<c:forEach items="${abc}" var="map" varStatus="rowNumber">
<tr>
<td align="center"><input type="checkbox" id="selectedItems" value="${map.key}=${rowNumber.index}" name="selectedItems" />
</td>
<td align="center">${map.key}</td>
<td align="center">${map.value}</td>
<td align="center">
<select name="val" id="val" >
<option value="=${rowNumber.index}">Select New Value</option>
<option value="1=${rowNumber.index}">1</option>
<option value="2=${rowNumber.index}">2</option>
<option value="3=${rowNumber.index}">3</option>
</select>
</td>
</tr>
</c:forEach>
</table>
Thank you Dileep, you idea helped. Here is how I did it. Now I can track for a particular row, what dropdown value was selected and create a map from it.

how to get value in textboxes selecting dropdown list value?

hi i want to display value in textbox selected by dropdown value. suppose i selected sql
i got the value like jdbc:mysql://localhost/lportal?useUnicode=true&characterEncoding=UTF-8&useFastDateParsing=falsein jdbc url textbox.com.mysql.jdbc.Driver driver name in driver class textbox.
this type of code i want
<form>
<table>
<tr>
<td>Database Type</td>
</tr>
<tr>
<td><select name="Database Type" onclick="fillData()" id="sel_value">
<option value="DB2">DB2</option>
<option value="Derby">Derby</option>
<option value="Hypersonic">Hypersonic</option>
<option value="Ingres">Ingres</option>
<option value="MySQL">MySQL</option>
<option value="Oracle">Oracle</option>
<option value="P6Spy">P6Spy</option>
<option value="PostgreSQL">PostgreSQL</option>
<option value="SQL Server">SQL Server</option>
<option value="Sybase">Sybase</option>
</select>
</tr>
<tr>
<td>JDBC URL(required)</td>
</tr>
<tr>
<td><input type="text" name="jdbcUrl" style="width: 550px;" id="jdbcUrl"></td>
</tr>
<tr>
<td>JDBC Driver Class Name(Required)</td>
</tr>
<tr>
<td><input type="text" name="text" style="width: 550px;"></td>
</tr>
<tr>
<td>username</td>
</tr>
<tr>
<td><input type="text" name="text" style="width: 550px;"></td>
</tr>
<tr>
<td>password</td>
</tr>
<tr>
<td><input type="password" name="text" style="width: 550px;"></td>
</tr>
</table>
</form>

Replace the onclick with onchange. Here try this code:
<select name="Database Type" onchange="fillData()" id="sel_value">
<option value="DB2">DB2</option>
<option value="Derby">Derby</option>
<option value="Hypersonic">Hypersonic</option>
<option value="Ingres">Ingres</option>
<option value="MySQL">MySQL</option>
<option value="Oracle">Oracle</option>
<option value="P6Spy">P6Spy</option>
<option value="PostgreSQL">PostgreSQL</option>
<option value="SQL Server">SQL Server</option>
<option value="Sybase">Sybase</option>
</select>
Javascript:
function fillData(){
alert($('#sel_value').val());
}

How to retrieve values from pop up in a parent window

I have a table tag in my Pop up window, in which the row can be dynamically inserted. I need to know how to retrieve the values correspond to the table in Parent window. Can you guys guide me to achieve this. I can retrieve the input box values, but not the rows in table.
Thanks
My pop up:
<form name="BREAKUP" method="POST" action="JavaScript:submitForm()">
<br>
<center>
<TABLE id="PDetailsTable" width="350px" border="1">
<tr>
<td>SNO</td>
<td>Team Name</td>
<td>Estimated Hours</td>
<td>Actual Hours</td>
<td>Month</td>
</tr>
<tr>
<td > 1 </td>
<TD ><INPUT id="TEAM_NME" ></TD>
<TD ><INPUT id="EST_HRS"></TD>
<TD ><INPUT id="ACT_HRS"></TD>
<TD >
<select id="MNTH" onchange="" size="1">
<option value="Jan">January</option>
<option value="Feb">February</option>
<option value="Mar">March</option>
<option value="Apr">April</option>
<option value="May">May</option>
<option value="Jun">June</option>
<option value="Jul">July</option>
<option value="Aug">August</option>
<option value="Sep">September</option>
<option value="Oct">October</option>
<option value="Nov">November</option>
<option value="Dec">December</option>
</select>
</TD>
</tr>
</TABLE>
<button value="Add Details" class="submitBtn" onclick="JavaScript:addRow('PDetailsTable');">
<span> Add Details </span></button>
<TABLE>
<TR align="center" valign="top">
<TD colspan="2"><img src="<%=imagesPath %>spacer.gif" height="10"></TD>
</TR>
<TR valign="bottom">
<TD colspan="2" align="center">
<button TYPE="submit" class="submitBtn" onclick="JavaScript:submitForm();">
<span> Submit </span></button>
<button value="Reset" class="submitBtn" onclick="JavaScript:resetForm();">
<span> Reset </span></button>
</TD>
</TR>
</TABLE>
There are three javascript functions.
I am using windows.opener in submiForm Function. I don't know how to send a list of values and retrieve in the parent windows

Categories

Resources