I currently have two tables that is on top of each other. the front table only shows it's header and the body is hidden using the css "visibility:hidden". this table is using "position:absolute" to make it freeze in place, the table is a complete clone of the 2nd table.
As i was testing on IE, the dropdown and link on the tbody of the 2nd table is working fine but when i tested it on chrome, the 2nd table cannot be clicked as it was blocked by the hidden table body in-front of it.
Are there any alternatives that i can use to implement the freezing of headers on chrome?
Note: The data that will be loaded is dynamically with different sizes. the width of each column will be adjusted accordingly.
Here is a sample code but this works fine on fiddle but won't be working when used as html file and run on chrome: https://fiddle.jshell.net/3poz4o4q/3/
Added the whole HTML file that i tested with.
Got the jquery from here http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js
and saved it on the file name "jquery-1.9.1.min.js" and referenced it.
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script>
function onLoad() {
var cloneData = $('#actualData tr').clone(false);
$("#sampleData").append(cloneData);
var cloneHeader = $('#behindHeader tr').clone();
$("#showingHeader").append(cloneHeader);
$("#sampleData").css("visibility", "collapse");
$("#behindHeader").css("visibility", "collapse");
$("#tableHeader").css("position", "absolute");
}
</script>
<body onload="onLoad()">
<div class="table-header" id="tableHeader">
<table class="editableTable" id="editTable" border="1">
<thead id="showingHeader"/>
<tbody id="sampleData"/>
</table>
</div>
<div class="table-body" id="tableBody">
<table class="editableTable" id="bodytable" border="1">
<thead id="behindHeader">
<tr id="entity-header">
<th colspan="13">
<a id="Create Something">Create Something</a>
<a id="Create another thing">Create another thing</a>
Save
</th>
</tr>
<tr id="column-headers">
<th id="data link">data link</th>
<th id="data 1">data 1</th>
<th id="data 2">data 2</th>
<th id="data 3">data 3</th>
<th id="data 4">data 4</th>
<th id="data 5">data 5</th>
<th id="data 6">data 6</th>
<th id="drop down 1">drop down 1</th>
<th><span id="checkbox 1">checkbox 1</span></th>
<th id="drop down 2">drop down 2</th>
<th><span id="checkbox 2">checkbox 2</span></th>
<th id="drop down 3">drop down 3</th>
<th><span id="checkbox 3">checkbox 3</span></th>
</tr>
</thead>
<tbody id="actualData">
<tr id="actual id" class="modified">
<td ><a href="#" >Data ID</a></td>
<td >Data Description 1</td>
<td >Data Description 2</td>
<td >Data Description 3</td>
<td >Data Description 4</td>
<td >Data Description 6</td>
<td >Data Description 7</td>
<td >
<select>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
<td >
<div class="checkbox">
<input id="1" type="checkbox"><label for="1"></label>
</div>
</td>
<td >
<select>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
</select></td>
<td >
<div class="checkbox">
<input id="2" type="checkbox"><label for="2"></label>
</div>
</td>
<td >
<select disabled="disabled">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
<td >
<div class="checkbox" disabled="disabled">
<input id="3" type="checkbox" disabled="disabled"><label for="3" disabled="disabled"></label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
Please try 'div class="table-header" id="tableHeader" style="z-index:-1" ';
Put the header div to back;
Related
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>
I have a table which have some fields like Service , amount , tax , action , I just want that if I tick on checkbox in that row , I want the table service data like Subscription charges should be added in an input and when I tick on another rows checkbox this table data also should add in that input with a comma like subscription charges, registration fees , also when I untick that row checkbox , that table data like subscription charges, registration fees also should be removed in input
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
<tr>
<td>
<span>Subscription Charges</span>
</td>
<td>
<span>500.00</span>
</td>
<td>
<span>90.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
<tr>
<td>
<span>registration fees</span>
</td>
<td>
<span>200.00</span>
</td>
<td>
<span>80.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" rules="all" border="1" id="table2" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
</tbody>
</table>
<input type="text" name="services">
One way of doing it using jQuery is to first make sure we notice if a checkbox is changed, then go to the parent row, and find the first TD which should contain what you're out after. After all that, get the "target" element (ie. the input box at the bottom) and set it's value.
$("input[type=checkbox]").on("change", function() {
var value = $(this).parent().parent().find("td:first-child").text();
var target = $("input[name=services]");
target.val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
<tr>
<td>
<span>Subscription Charges</span>
</td>
<td>
<span>500.00</span>
</td>
<td>
<span>90.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
<tr>
<td>
<span>registration fees</span>
</td>
<td>
<span>200.00</span>
</td>
<td>
<span>80.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" rules="all" border="1" id="table2" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
</tbody>
</table>
<input type="text" name="services">
JavaScript knowledge is minimal. I could not write because I did not know Javascript. I am waiting for your help in this regard.
I want to show the address with SelectBox. My html codes are as follows. When 1 city is selected, only that city will be visible. How to do it?
Example: http://www.pakmaya.com.tr/tr/iletisim-bilgileri
My codes;
<select class="form-control">
<option value="miami">Miami</option>
<option value="denver">Denver</option>
<option value="paris">Paris</option>
</select>
<div class="miami">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Miami /USA</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="miamimaps">GOGOLEMAPSCODE</div>
</div>
<div class="denver">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Miami /USA</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="denvermaps">GOGOLEMAPSCODE</div>
</div>
<div class="paris">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Miami /USA</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="parismaps">GOGOLEMAPSCODE</div>
</div>
Here is one possible solution:
HTML
<select class="form-control">
<option value="miami">Miami</option>
<option value="denver">Denver</option>
<option value="paris">Paris</option>
</select>
<div class="city miami">
<p>miami</p>
<table>
// ...
</table>
<div class="miamimaps">GOGOLEMAPSCODE</div>
</div>
<div class="city denver">
<p>denver</p>
<table>
// ...
</table>
<div class="denvermaps">GOGOLEMAPSCODE</div>
</div>
<div class="city paris">
<p>paris</p>
<table>
// ...
</table>
<div class="parismaps">GOGOLEMAPSCODE</div>
</div>
CSS
.city {
display: none;
}
.miami {
display: block;
}
JS
var select = document.getElementsByTagName('select')[0],
cities = document.getElementsByClassName('city');
select.addEventListener('change', function(e) {
var selectedCity = e.target.value,
target = document.getElementsByClassName(selectedCity)[0];
for(var i = 0; i < cities.length; i++) cities[i].style.display = 'none';
target.style.display = 'block';
}, false);
jsfiddle
Update
jQuery version
var $cities = $('.city');
$('select').on('change', function() {
var selectedCity = $(this).val(),
$target = $('.' + selectedCity);
$cities.hide();
$target.show();
});
jsfiddle (jQuery version)
You need to check through a change event listener and compare the value in your select input with the class of the container div that selected city. From there set the style to display none or block all depending:
document.querySelector('.form-control').addEventListener('change', (e) => {
const selectedOption = e.target.value
Array.from(document.querySelectorAll('.miami, .denver, .paris')).forEach(elem => {
if (elem.className !== selectedOption) {
elem.style.display = 'none';
} else {
elem.style.display = 'block';
}
});
});
<select class="form-control">
<option value="miami">Miami</option>
<option value="denver">Denver</option>
<option value="paris">Paris</option>
</select>
<div class="miami">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Miami /USA</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="miamimaps">GOGOLEMAPSCODE</div>
</div>
<div class="denver">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Denver /USA</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="denvermaps">GOGOLEMAPSCODE</div>
</div>
<div class="paris">
<table>
<tbody>
<tr>
<th scope="row">Phone</th>
<td>+11 123 45 67</td>
</tr>
<tr>
<th scope="row">Address</th>
<td>One way Streen Paris /FR</td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>e-mail#mail.com</td>
</tr>
</tbody>
</table>
<div class="parismaps">GOGOLEMAPSCODE</div>
</div>
i want when user click delete icon i need value of hidden input inside "delete" class but i am getting undefined can someone guide me where i am doing wrong
<table class="items-list">
<tr>
<th> </th>
<th>Product name</th>
<th>Product price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<!--Item-->
<tr class="item">
<td class="thumb"><img src="img/catalog/shopping-cart-thumb_2.jpg" alt="Lorem ipsum"/></td>
<td class="name">Wristlet</td>
<td class="price">715,00 $</td>
<td class="qnt-count">
<a class="incr-btn" href="#">-</a>
<input class="quantity form-control" type="text" value="2">
<a class="incr-btn" href="#">+</a>
</td>
<td class="total">2715,00 $</td>
<td class="delete"> <input type="hidden" name="row_id" value="123" > <i class="icon-delete"></i></td>
</tr>
</table>
my jquery code is as follow
$(document).on('click', '.shopping-cart .delete', function(){
var $target = $(this).parent().find('.row_id').val();
alert($target);
});
every time i run to alert i get error " undefined.tried many different ways but didnt work
You don't have a class on the input, just a name, change your markup like this:
<input type="hidden" name="row_id" class="row_id" value="123">
or your selector like this:
var $target = $(this).parent().find('input[name="row_id"]').val();
$(document).on('click', '.delete', function(){
var $target = $(this).find('input').val();
alert($target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="items-list">
<tr>
<th> </th>
<th>Product name</th>
<th>Product price</th>
<th>Quantity</th>
<th>Total</th>
<th>action</th>
</tr>
<!--Item-->
<tr class="item">
<td class="thumb"><img src="img/catalog/shopping-cart-thumb_2.jpg" alt="Lorem ipsum"/></td>
<td class="name">Wristlet</td>
<td class="price">715,00 $</td>
<td class="qnt-count">
<a class="incr-btn" href="#">-</a>
<input class="quantity form-control" type="text" value="2">
<a class="incr-btn" href="#">+</a>
</td>
<td class="total">2715,00 $</td>
<td class="delete"> <input type="hidden" name="row_id" value="123" > <i class="icon-delete">Delete</i></td>
</tr>
</table>
Please check the Working Code.
I have firstly added a new <TH> Tag to display the delete button.
And then in jquery i user .find to get the internal element of <TD> and as per your code it alters the value of hidden box
Thanks wish it might help you
I have the following bootstrap table, I want to add a textarea for a row.
But that text area should expand to all the columns. I have included a image example.
For row 2 I want to have the 4 columns and the textarea. text area should cover all the column as show in the image below.
Is it possible to do?
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th data-field="state" data-radio="true"></th>
<th data-field="name">Name</th>
<th data-field="starts">Stars</th>
<th data-field="forks">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-table
</td>
<td>526</td>
<td>122</td>
<td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup" checked></td>
<td>
multiple-select
</td>
<td>288</td>
<td>150</td>
<td>A jQuery plugin to select multiple elements with checkboxes :)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-show-password
</td>
<td>32</td>
<td>11</td>
<td>Show/hide password plugin for twitter bootstrap.
</td>
</tr>
</tbody>
</table>
You can achieve it in the following way--
Add colspan=12 to your <td> which contains the textarea and give the text area width:100%
Working snippet
textarea {
width:100%;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th data-field="state" data-radio="true"></th>
<th data-field="name">Name</th>
<th data-field="starts">Stars</th>
<th data-field="forks">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-table
</td>
<td>526</td>
<td>122</td>
<td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup" checked></td>
<td>
multiple-select
</td>
<td>288</td>
<td>150</td>
<td>A jQuery plugin to select multiple elements with checkboxes :)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-show-password
</td>
<td>32</td>
<td>11</td>
<td>Show/hide password plugin for twitter bootstrap.
</td>
</tr>
<tr>
<td colspan="12">
<textarea></textarea>
</td>
</tr>
</tbody>
</table>