For my homework i have to do multiple table with tabs.
So i want to align my table, i can align 1 but when i want align another one, thats broke everything. And i have problem with my search bar too, i have multiple search bar, and, when i search on the 2nd table that broke my 1st table.
I try to use different JS for resize my table, but, thats didnt work
function resizeTables() {
console.log("executeResize:");
var tableArrOrigin = $(".search-table")[0]; //var tableArr = document.getElementsByTagName('table');
var tableArrDestiny = $(".filter-table")[0];
var cellWidths = new Array();
for (j = 0; j < tableArrOrigin.rows[0].cells.length; j++) {
var cell = tableArrOrigin.rows[0].cells[j];
if ($('body.ie').length > 0) { //IE browser
cellWidths[j] = $(cell).width() + 2; //2=padding, apply fix for IE due to box model managed differently
console.log('IE ejecutado')
} else {
cellWidths[j] = $(cell).width(); //cellWidths[j] = cell.clientWidth - $(cell).css('padding-right')-$(cell).css('padding-left');
console.log('No IE ejecutado')
}
}
for (j = 1; j < tableArrOrigin.rows[0].cells.length; j++) {
//tableArrDestiny.rows[0].cells[j].style.width = cellWidths[j]+'px !important;';
$(tableArrDestiny.rows[0].cells[j]).attr('style', 'width:' + cellWidths[j] + 'px !important');
}
}
function resizeTables2() {
console.log("executeResize2:");
var tableArrOrigin2 = $(".search-table2")[0]; //var tableArr = document.getElementsByTagName('table');
var tableArrDestiny2 = $(".filter-table2")[0];
var cellWidths2 = new Array();
for (j = 0; j < tableArrOrigin2.rows[0].cells.length; j++) {
var cell2 = tableArrOrigin2.rows[0].cells[j];
if ($('body.ie').length > 0) { //IE browser
cellWidths2[j] = $(cell2).width() + 2;
console.log('IE ejecutado')
} else {
cellWidths2[j] = $(cell2).width(); //cellWidths2[j] = cell.clientWidth - $(cell).css('padding-right')-$(cell).css('padding-left');
console.log('No IE ejecutado')
}
}
for (j = 1; j < tableArrOrigin2.rows[0].cells.length; j++) {
$(tableArrDestiny2.rows[0].cells[j]).attr('style', 'width:' + cellWidths2[j] + 'px !important');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Pen by Augusto</title>
<link rel='stylesheet' href="jquery-ui.css">
<link rel="stylesheet" href="./style.css">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CodePen - A Pen by Augusto</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<link rel="stylesheet" href="style.css">
<script src="script.js" type="text/javascript"></script>
<script type="text/javascript">
function change_onglet(name) {
document.getElementById('onglet_' + anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_' + name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_' + anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_' + name).style.display = 'block';
anc_onglet = name;
}
</script>
</head>
<body>
<h1>Table Sorter Final</h1>
<input type="search" class="light-table-filter" data-table="search-table" placeholder="Search..">
<!-- chercher le resize -->
<br/>
<br/>
<div id="combito">
<div id="separator"></div>
<div class="opt-combito" id="asc">
<!-- <img src="images/hmenu-asc.gif" alt="" /> -->
<!-- non utiliser -->
<span>Sort Ascending</span>
</div>
<div class="opt-combito" id="desc">
<!-- <img src="images/hmenu-desc.gif" alt="" /> -->
<!-- non utiliser -->
<span>Sort Descending</span>
</div>
</div>
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Tableau</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>
<span class="onglet_0 onglet" id="onglet_hallo" onclick="javascript:change_onglet('hallo');">hallo</span>
</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<h1>Tableau</h1>
<table id="test" class="filter-table" style="border-spacing: 0px;" border="1">
<thead>
<tr>
<th style="padding: 0px; width: 20px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<div style="width:95px"> </div>
</th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width:95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
</tr>
</thead>
</table>
<table border="1" id="tablita" class="sortable search-table">
<thead>
<tr>
<th id="column-a" class="menu" style="width: 10px;">ID</th>
<th data-field="Name" data-checkbox="true" class="menu">Name</th>
<th data-field="Phone" data-filter-control="input" data-sortable="true" class="menu">Phone</th>
<th data-field="Email" data-filter-control="select" data-sortable="true" class="menu">Email</th>
<th data-field="City" data-filter-control="select" data-sortable="true" class="menu">City</th>
<th data-field="State" data-sortable="true" class="menu">State</th>
<th data-field="Zipcode" data-sortable="true" class="menu">Zip Code</th>
<th data-field="Status" data-sortable="true" class="menu">Status</th>
<th data-field="Vehicle" data-sortable="true" class="menu">Vehicle</th>
</tr>
</thead>
<tbody id="tbody">
<div id="tabs1" class="tabs">
</div>
</tbody>
</table>
</div>
<!-------------------------------------------------2eme tableau------------------------------------------------------------->
<div class="contenu_onglet" id="contenu_onglet_pourquoi">
<h1>Tableau 2</h1>
<table id="test2" class="filter-table2" style="border-spacing: 0px;" border="1">
<thead>
<tr>
<th style="padding: 0px; width: 20px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<div style="width:95px"> </div>
</th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
</tr>
</thead>
</table>
<table border="1" id="tablita2" class="sortable search-table2">
<thead>
<tr>
<th id="column-a" class="menu" style="width: 10px;">ID</th>
<th data-field="Name" data-checkbox="true" class="menu">Name</th>
<th data-field="Phone" data-filter-control="input" data-sortable="true" class="menu">Phone</th>
<th data-field="Email" data-filter-control="select" data-sortable="true" class="menu">Email</th>
<th data-field="City" data-filter-control="select" data-sortable="true" class="menu">City</th>
<th data-field="State" data-sortable="true" class="menu">State</th>
<th data-field="Zipcode" data-sortable="true" class="menu">Zip Code</th>
</tr>
</thead>
<tbody id="tbody2">
<div id="tab2" class="tabs2">
</div>
</tbody>
</table>
</div>
<div class="contenu_onglet" id="contenu_onglet_hallo">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</div>
</div>
</div>
<script type="text/javascript">
var anc_onglet = 'quoi';
change_onglet(anc_onglet);
</script>
<script src='https://codepen.io/assets/libs/fullpage/jquery_and_jqueryui.js'></script>
<!-- non utiliser -->
<script src="js/index.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="tableau.js"></script>
<script src="tableau2.js"></script>
<script src="./script.js"></script>
<button id="ToggleIdCol">Hide/show 1st</button>
<script>
var onoff = false;
$(document).ready(function() {
$("#ToggleIdCol").click(function() {
$("#test").find("tr").each(function(key, value) {
$(value).find("th:nth-child(1)").toggle();
onoff = !(onoff);
});
$("#tablita").find("tr").each(function(key, value) {
$(value).find("th:nth-child(1)").toggle();
$(value).find("td:nth-child(1)").toggle();
});
});
$("#test").find("tr").each(function(key, value) {
$(value).find("th:nth-child(1)").toggle(50);
});
$("#tablita").find("tr").each(function(key, value) {
$(value).find("th:nth-child(1)").toggle();
$(value).find("td:nth-child(1)").toggle();
});
});
</script>
</body>
</html>
I want align the search bar table, with my table on both table, so on the 1st one that's works but not on the 2nd one, and i don't understand how i can do it.
Currently it looks like this, my data are not aligned:
To have header rows of the same size (i.e. align header cells) just use one table with double header rows. One for select and one for title/labels
UPDATED
If you use JUST ONE (one - means one table which contains both filter and data/content, in your example two tables instead of four) table it is no problem with getting all columns to be aligned (i.e. remove <table id="tablita"> and merge it as shown <table id="test">). If you need to have html template structure as shown (you can not use one table) you need to sync table columns programmatically using javascript.
function syncWidth() {
const origin = $("#test > thead > tr:first-child > th");
const target= $("#tablita > thead > tr:first-child > th");
target.each((i, cell) => {
let related = origin.eq(i),
oWidth = related.outerWidth();
$(cell).css({
"min-width": oWidth
}).width(related.width());
});
}
something like this code sniplet, but you have to call that method after anything table updates (i.e. add/remove/update rows into table(s) or other data/styling/smth else size changes one of the tables). IMHO simpler change template structure to have JUST ONE table. And result of using one table instead of separated
function resizeTables() {
console.log("executeResize:");
var tableArrOrigin = $(".search-table")[0]; //var tableArr = document.getElementsByTagName('table');
var tableArrDestiny = $(".filter-table")[0];
var cellWidths = new Array();
for (j = 0; j < tableArrOrigin.rows[0].cells.length; j++) {
var cell = tableArrOrigin.rows[0].cells[j];
if ($('body.ie').length > 0) { //IE browser
cellWidths[j] = $(cell).width() + 2; //2=padding, apply fix for IE due to box model managed differently
console.log('IE ejecutado')
} else {
cellWidths[j] = $(cell).width(); //cellWidths[j] = cell.clientWidth - $(cell).css('padding-right')-$(cell).css('padding-left');
console.log('No IE ejecutado')
}
}
for (j = 1; j < tableArrOrigin.rows[0].cells.length; j++) {
//tableArrDestiny.rows[0].cells[j].style.width = cellWidths[j]+'px !important;';
$(tableArrDestiny.rows[0].cells[j]).attr('style', 'width:' + cellWidths[j] + 'px !important');
}
}
function resizeTables2() {
console.log("executeResize2:");
var tableArrOrigin2 = $(".search-table2")[0]; //var tableArr = document.getElementsByTagName('table');
var tableArrDestiny2 = $(".filter-table2")[0];
var cellWidths2 = new Array();
for (j = 0; j < tableArrOrigin2.rows[0].cells.length; j++) {
var cell2 = tableArrOrigin2.rows[0].cells[j];
if ($('body.ie').length > 0) { //IE browser
cellWidths2[j] = $(cell2).width() + 2;
console.log('IE ejecutado')
} else {
cellWidths2[j] = $(cell2).width(); //cellWidths2[j] = cell.clientWidth - $(cell).css('padding-right')-$(cell).css('padding-left');
console.log('No IE ejecutado')
}
}
for (j = 1; j < tableArrOrigin2.rows[0].cells.length; j++) {
$(tableArrDestiny2.rows[0].cells[j]).attr('style', 'width:' + cellWidths2[j] + 'px !important');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Pen by Augusto</title>
<link rel='stylesheet' href="jquery-ui.css">
<link rel="stylesheet" href="./style.css">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CodePen - A Pen by Augusto</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<link rel="stylesheet" href="style.css">
<script src="script.js" type="text/javascript"></script>
<script type="text/javascript">
function change_onglet(name) {
document.getElementById('onglet_' + anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_' + name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_' + anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_' + name).style.display = 'block';
anc_onglet = name;
}
</script>
</head>
<body>
<h1>Table Sorter Final</h1>
<input type="search" class="light-table-filter" data-table="search-table" placeholder="Search..">
<!-- chercher le resize -->
<br/>
<br/>
<div id="combito">
<div id="separator"></div>
<div class="opt-combito" id="asc">
<!-- <img src="images/hmenu-asc.gif" alt="" /> -->
<!-- non utiliser -->
<span>Sort Ascending</span>
</div>
<div class="opt-combito" id="desc">
<!-- <img src="images/hmenu-desc.gif" alt="" /> -->
<!-- non utiliser -->
<span>Sort Descending</span>
</div>
</div>
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Tableau</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>
<span class="onglet_0 onglet" id="onglet_hallo" onclick="javascript:change_onglet('hallo');">hallo</span>
</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<h1>Tableau</h1>
<table id="test" class="filter-table" style="border-spacing: 0px;" border="1">
<thead>
<tr>
<th style="padding: 0px; width: 20px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<div style="width:95px"> </div>
</th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width:95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
</tr>
<tr>
<th id="column-a" class="menu" style="width: 10px;">ID</th>
<th data-field="Name" data-checkbox="true" class="menu">Name</th>
<th data-field="Phone" data-filter-control="input" data-sortable="true" class="menu">Phone</th>
<th data-field="Email" data-filter-control="select" data-sortable="true" class="menu">Email</th>
<th data-field="City" data-filter-control="select" data-sortable="true" class="menu">City</th>
<th data-field="State" data-sortable="true" class="menu">State</th>
<th data-field="Zipcode" data-sortable="true" class="menu">Zip Code</th>
<th data-field="Status" data-sortable="true" class="menu">Status</th>
<th data-field="Vehicle" data-sortable="true" class="menu">Vehicle</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>1</td>
<td>Person1 Name</td>
<td>Person1 Phone</td>
<td>Person1 Email</td>
<td>Person1 City</td>
<td>Person1 State</td>
<td>Person1 Zip Code</td>
<td>Person1 Status</td>
<td>Person1 Vehicle</td>
</tr>
<tr>
<td>2</td>
<td>Person2 Name</td>
<td>Person2 Phone</td>
<td>Person2 Email</td>
<td>Person2 City</td>
<td>Person2 State</td>
<td>Person2 Zip Code</td>
<td>Person2 Status</td>
<td>Person2 Vehicle</td>
</tr>
</tbody>
</table>
</div>
<!-------------------------------------------------2eme tableau------------------------------------------------------------->
<div class="contenu_onglet" id="contenu_onglet_pourquoi">
<h1>Tableau 2</h1>
<table id="test2" class="filter-table2" style="border-spacing: 0px;" border="1">
<thead>
<tr>
<th style="padding: 0px; width: 20px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<div style="width:95px"> </div>
</th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
</tr>
<tr>
<th id="column-a" class="menu" style="width: 10px;">ID</th>
<th data-field="Name" data-checkbox="true" class="menu">Name</th>
<th data-field="Phone" data-filter-control="input" data-sortable="true" class="menu">Phone</th>
<th data-field="Email" data-filter-control="select" data-sortable="true" class="menu">Email</th>
<th data-field="City" data-filter-control="select" data-sortable="true" class="menu">City</th>
<th data-field="State" data-sortable="true" class="menu">State</th>
<th data-field="Zipcode" data-sortable="true" class="menu">Zip Code</th>
</tr>
</thead>
<tbody id="tbody2">
<div id="tab2" class="tabs2">
</div>
</tbody>
</table>
</div>
<div class="contenu_onglet" id="contenu_onglet_hallo">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</div>
</div>
</div>
<script type="text/javascript">
var anc_onglet = 'quoi';
change_onglet(anc_onglet);
</script>
<script src='https://codepen.io/assets/libs/fullpage/jquery_and_jqueryui.js'></script>
<!-- non utiliser -->
<script src="js/index.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="tableau.js"></script>
<script src="tableau2.js"></script>
<script src="./script.js"></script>
<button id="ToggleIdCol">Hide/show 1st</button>
<script>
var onoff = false;
$(document).ready(function() {
$("#ToggleIdCol").click(function() {
$("#test").find("tr").each(function(key, value) {
$(value).find("th:nth-child(1),td:nth-child(1)").toggle();
onoff = !(onoff);
});
});
$("#test").find("tr").each(function(key, value) {
$(value).find("th:nth-child(1),td:nth-child(1)").toggle(50);
});
});
</script>
</body>
</html>
Related
I have been trying to display this bootstrap table with data-filter-controlbut I still haven't been able to do so. The filters are not working in two ways:
The filter does not display all the categories included in that column
The filter does not work at all
Could anyone please help me figure this out? Below is the whole script. Thanks!
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
<title>CodePen - Bootstrap Table - Filter control</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css">
<link rel="stylesheet" href="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
<style>
.container {
width: 1100px;
padding: 2em;
}
.bold-blue {
font-weight: bold;
color: #0277BD;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<div class="container">
<h1>Bootstrap table with filters</h1>
<div id="toolbar">
<select class="form-control">
<option value="">Export Basic</option>
<option value="all">Export All</option>
<option value="selected">Export Selected</option>
</select>
</div>
<table id="table"
data-toggle="table"
data-search="true"
data-filter-control="true"
data-show-export="true"
data-click-to-select="true"
data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="Income Assets" data-filter-control="select" data-sortable="true">Income Assets</th>
<th data-field="Employed Full" data-filter-control="select" data-sortable="true">Employed Full</th>
<th data-field="Bachelor" data-filter-control="select" data-sortable="true">Bachelor</th>
<th data-field="High School" data-filter-control="select" data-sortable="true">High School</th>
<th data-field="English" data-filter-control="select" data-sortable="true">English</th>
<th data-field="Age" data-filter-control="select" data-sortable="true">Age</th>
<th data-field="HH Member +5" data-filter-control="select" data-sortable="true">HH Member +5</th>
<th data-field="Health" data-filter-control="select" data-sortable="true">Health</th>
<th data-field="Benefit M1" data-filter-control="select" data-sortable="true">Benefit M1</th>
<th data-field="Cit" data-filter-control="select" data-sortable="true">Cit</th>
<th data-field="Sample Used Benefits" data-filter-control="select" data-sortable="true">Sample Used Benefits</th>
<th data-field="Total Sample" data-filter-control="select" data-sortable="true">Total Sample</th>
<th data-field="Total Weighted Pop." data-filter-control="select" data-sortable="true">Total Weighted Pop.</th>
<th data-field="Weighted Used Benefits" data-filter-control="select" data-sortable="true">Weighted Used Benefits</th>
<th data-field="Use Rate" data-filter-control="select" data-sortable="true">Use Rate</th>
</tr>
</thead>
<tbody>
<tr><td class="bs-checkbox "><input data-index="1" name="btSelectItem" type="checkbox"></td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>7218</td><td>38725</td><td>273927698.951485</td><td>44936410.729928</td><td>0.164044785912237</td></tr>
<tr><td class="bs-checkbox "><input data-index="2" name="btSelectItem" type="checkbox"></td><td>*</td><td>*</td><td>*</td><td>*</td><td>YES</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>6902</td><td>37851</td><td>267669426.039534</td><td>42804442.2445731</td><td>0.159915321215098</td></tr>
<tr><td class="bs-checkbox "><input data-index="3" name="btSelectItem" type="checkbox"></td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>YES</td><td>6818</td><td>36928</td><td>259231128.693021</td><td>41949287.17618</td><td>0.161821951660196</td></tr>
<tr><td class="bs-checkbox "><input data-index="4" name="btSelectItem" type="checkbox"></td><td>*</td><td>*</td><td>*</td><td>*</td><td>YES</td><td>*</td><td>*</td><td>*</td><td>*</td><td>YES</td><td>6638</td><td>36499</td><td>256169883.708981</td><td>40725041.7232831</td><td>0.158976695986435</td></tr>
<tr><td class="bs-checkbox "><input data-index="5" name="btSelectItem" type="checkbox"></td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>YES</td><td>*</td><td>*</td><td>5445</td><td>32836</td><td>240442125.749909</td><td>35317041.6922081</td><td>0.146883752512413</td></tr>
</tbody>
</table>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-9bf952ccbbd13c245169a0a1190323a27ce073a3d304b8c0fdf421ab22794a58.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js"></script>
<script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js"></script>
<script id="rendered-js">
//exporte les données sélectionnées
var $table = $('#table');
$(function () {
$('#toolbar').find('select').change(function () {
$table.bootstrapTable('refreshOptions', {
exportDataType: $(this).val() });
});
});
var trBoldBlue = $("table");
$(trBoldBlue).on("click", "tr", function () {
$(this).toggleClass("bold-blue");
});
//# sourceURL=pen.js
</script>
</body></html>
Filters don't work when there is a space in the data-field attribute, like data-field="Income Assets"
What I am going to do is:
When i click on mails button, 1st table is going to appear and hide the second table and when subscribers button is pressed, 2nd table has to appear and hide the 1st table.
But I am facing bugs like when i pressed 2nd button it will not hide the 1st table
<script>
function toggle_display(id){
if(id=='mails'){
document.getElementById('mails').classList.remove('hidden');
document.getElementById('subscribers').classList.add('hidden');
}
if(id=='subscribers'){
document.getElementById('mails').classList.add('hidden');
document.getElementById('subscribers').classList.remove('hidden');
}
}</script>
<input type="button" class="btn" value="Mails"/>
<input type="button" class="btn" value="Subscribers"/>
<div class="row well well-lg hidden" id="mails">
<table class="col-sm-12" border="1px solid black">
<tr>
<th class="col-sm-2">Name</th>
<th class="col-sm-2">Email</th>
<th class="col-sm-2">Phone</th>
<th class="col-sm-2">Subject</th>
<th class="col-sm-3">Message</th>
</tr>
</table>
</div>
<div class="row well well-lg hidden" id="subscribers">
<table class="col-sm-12" border="1px solid black">
<tr>
<th class="col-sm-2">ID</th>
<th class="col-sm-5">Email</th>
<th class="col-sm-3">Action</th>
</tr>
</table>
</div>
Use this,, It is working...
<script>
function toggle_display(id){
if(id=='mails'){
document.getElementById('mails').style.display = 'block';
document.getElementById('subscribers').style.display = 'none';
}
if(id=='subscribers'){
document.getElementById('mails').style.display = 'none';
document.getElementById('subscribers').style.display = 'block';
}
}</script>
<input type="button" class="btn" onclick="toggle_display('mails');" value="Mails"/>
<input type="button" class="btn" value="Subscribers" onclick="toggle_display('subscribers');"/>
<div class="row well well-lg hidden" id="mails">
<table class="col-sm-12" border="1px solid black">
<tr>
<th class="col-sm-2">Name</th>
<th class="col-sm-2">Email</th>
<th class="col-sm-2">Phone</th>
<th class="col-sm-2">Subject</th>
<th class="col-sm-3">Message</th>
</tr>
</table>
</div>
<div class="row well well-lg hidden" id="subscribers">
<table class="col-sm-12" border="1px solid black">
<tr>
<th class="col-sm-2">ID</th>
<th class="col-sm-5">Email</th>
<th class="col-sm-3">Action</th>
</tr>
</table>
</div>
Heyy i wanna dynamically change the value of all the td tag inside my html using javascript ..any guess hoe can we do it...here is the sample code of my html
i wanna change its value via javasript how can be do please help..nd thanks in advance...
<h1>Size Conformation</h1>
<img class="headerlogo" src="./css/images/icons-png/power-black.png">
</div>
<div id="user-details-table" data-role="content">
<table style="border: none !important; width: 100%">
<thead>
<tr class="custom-table-for-user-detial">
<th colspan="3"
style="text-align: left; margin-bottom: 20px; color: #7695D8;">Employee
Details</th>
</tr>
</thead>
<tbody>
<tr class="custom-table-for-user-detial">
<td width="40%">IGA Code</td>
<td class="colon">:</td>
<td>IGA001</td>
</tr>
<tr class="custom-table-for-user-detial">
<td>Name</td>
<td class="colon">:</td>
<td id="username">Vineet Kumar</td>
</tr>
<tr class="custom-table-for-user-detial">
<td>DOJ</td>
<td class="colon">:</td>
<td>18.04.1991</td>
</tr>
<tr class="custom-table-for-user-detial">
<td>Gender</td>
<td class="colon">:</td>
<td>Male</td>
</tr>
<tr class="custom-table-for-user-detial">
<td>Base Station</td>
<td class="colon">:</td>
<td>DEL</td>
</tr>
<tr class="custom-table-for-user-detial">
<td>Department</td>
<td class="colon">:</td>
<td class="custom-table-for-user-detial">AOC</td>
</tr>
</tbody>
</table>
</div>
<div class="white-background" style="margin-left: 20px;"
data-theme="d">
<div class="center">
<form>
<div data-role="collapsible" data-content-theme="c"
data-iconpos="right">
<h3 style="text-align: justify; text-justify: inter-word;">
Entitlement</h3>
<div id="sizeable" style="text-align: left; margin-top: 10px; padding: 5px;">Sizable
Items</div>
<div
style="width: 100% !important; height: 1px; background: #dedde2;"></div>
<table cellspacing="0" style="width: 100%">
<tr class="rowforspace">
</tr>
<tr>
<th class="rowleft">
<div class="flight-from">Shirt</div>
</th>
<th class="rowmiddle"><div class="middle-div"></div></th>
<th class="rowright" style="padding-left: 0px !important;"><select
name="shirt" id="shirt" data-theme="a" style="display: inline;">
<option style="background-color: #fff;">Small</option>
<option>Medium</option>
<option>Large</option>
<option>XLarge</option>
<option>XXLarge</option>
</select></th>
</tr>
<tr class="rowforspace">
</tr>
<tr>
<th class="rowleft">
<div class="flight-from">Pent</div>
</th>
<th class="rowmiddle"><div class="middle-div"></div></th>
<th class="rowright" style="padding-left: 0px !important;"><select
name="pent" id="pent" data-theme="a" style="display: inline;">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>XLarge</option>
<option>XXLarge</option>
</select></th>
</tr>
<tr class="rowforspace">
</tr>
<tr>
<th class="rowleft">
<div class="flight-from">Belt</div>
</th>
<th class="rowmiddle"><div class="middle-div"></div></th>
<th class="rowright" style="padding-left: 0px !important;"><select
name="belt" id="belt" data-theme="a" style="display: inline;">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>XLarge</option>
<option>XXLarge</option>
</select></th>
</tr>
<tr class="rowforspace">
</tr>
<tr>
<th class="rowleft">
<div class="flight-from">Hat</div>
</th>
<th class="rowmiddle"><div class="middle-div"></div></th>
<th class="rowright" style="padding-left: 0px !important;"><select
name="hat" id="hat" data-theme="a" style="display: inline;">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>XLarge</option>
<option>XXLarge</option>
</select></th>
</tr>
<tr class="rowforspace">
</tr>
<tr>
<th class="rowleft">
<div class="flight-from">Overcoat</div>
</th>
<th class="rowmiddle"><div class="middle-div"></div></th>
<th class="rowright" style="padding-left: 0px !important;"><select
name="overcoat" id="overcoat" data-theme="a"
style="display: inline;">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>XLarge</option>
<option>XXLarge</option>
</select></th>
</tr>
<tr class="rowforspace">
</tr>
<tr>
<th class="rowleft">
<div class="flight-from">Cabin Shue</div>
</th>
<th class="rowmiddle"><div class="middle-div"></div></th>
<th class="rowright" style="padding-left: 0px !important;"><select
name="cabin-shue" id="cabin-shue" data-theme="a"
style="display: inline;">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>XLarge</option>
<option>XXLarge</option>
</select></th>
</tr>
<tr class="rowforspace">
</tr>
</table>
</div>
</form>
</div>
<div class="center">
<div style="width: 50%; float: right !important; margin-right: 0px;">
<a class="inner" id="new-joinee-submit" data-role="button"
data-theme="e" href="javascript:newJoineeSubmit()">Submit</a>
</div>
</div>
</div>
</div>
change the value of all the td tag inside my html
Use getElementsByTagName()
vat allTDs = document.getElementsByTagName( "td" );
for ( var counter = 0; counter < allTDs.length; counter++ )
{
allTDs[ counter ].innerHTML = "WHATEVER YOU LIKE";
}
Viva la/le jQuery!
$('td').html("<b>Hello table data</b>")
I like the native approach from #gurvinder372, but you can't beat a one-liner from jQuery. However, a more functional native approach might look like:
var paragraphs = document.getElementsByTagName('p');
var helloPee = function (p) {
p.innerHTML = 'Hello P!'
};
[].forEach.call(paragraphs, helloPee);
You can add jquery code to find the td tag and change the text value you want to.
like:
$(function(){
$('#user-details-table').find(' td').eq(2).replaceWith("Changed Value");
});
Edited: Fiddle
Using document.querySelectorAll - it is native browser function, no library required.
var trs = document.querySelectorAll("#user-details-table tbody tr");
var tds, value,i;
for (i in trs) {
if (!tr.hasOwnProperty(i)) continue;
tds = tr[i].children;
value = "ilya"; // select it based on row number (i)
tds[2].textContent = value;
}
My javascript code isn't working because nothing's showing up when I click the button. Anybody know the solution? I already tried taking out the code and formatting the button to alert(...) and it worked, so now I'm stuck on whats going on with the math equations. I'm positive I didn't miss a bracket or punctuation though. Thanks for the feedback and help.
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<style type="text"/css>
.inbox
{
width=30px;
text-align: right;
border: 2px solid black;
}
.align
{
text-align: right
}
</style>
<script type="text/javascript">
function compute() {
var a = form1.inputA.value;
a = parseFloat(a);
var b = form1.inputB.value;
b = parseFloat(b);
var c = form1.inputC.value;
c = parseFloat(c);
var e = a * 5.49;
form1.sumA.value = e.toFixed(2);
}
function pageInit()
{
form1.inputA.focus();
}
</script>
</head>
<body onload="pageInit();">
<form id="form1">
<table border="2" >
<tr>
<th colspan="4">Sample Order Form</th>
</tr>
<tr>
<th>Quantity</th>
<th>item</th>
<th>Unit Price</th>
<th>Totals</th>
</tr>
<tr>
<th>
<input tabindex="1" class="inbox" type="text" id="inputA" />
</th>
<th>Apples</th>
<td>$5.49</td>
<th>
<input class="inbox" type="text" id="sumA" readonly="readonly" />
</th>
</tr>
<tr>
<th>
<input tabindex="4" type="button" value="Compute" onclick="compute();" />
</th>
</tr>
</table>
</form>
</body>
</html>
Try this
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<style>
.inbox {
width =30px;
text-align: right;
border: 2px solid black;
}
.align {
text-align: right;
}
</style>
<script type="text/javascript">
function compute() {
var a = document.getElementById("inputA").value;
var e = a * 5.49;
document.getElementById("sumA").value = e.toFixed(2);
}
function pageInit() {
document.getElementById("inputA").focus();
}
</script>
</head>
<body onload="pageInit();">
<form id="form1">
<table border="2">
<tr>
<th colspan="4">Sample Order Form</th>
</tr>
<tr>
<th>Quantity</th>
<th>item</th>
<th>Unit Price</th>
<th>Totals</th>
</tr>
<tr>
<th>
<input tabindex="1" class="inbox" type="text" id="inputA" />
</th>
<th>Apples</th>
<td>$5.49</td>
<th>
<input class="inbox" type="text" id="sumA" readonly="readonly" />
</th>
</tr>
<tr>
<th>
<input tabindex="4" type="button" value="Compute" onclick="compute();" />
</th>
</tr>
</table>
</form>
</body>
</html>
I'm using list.js (http://listjs.com/) to create a filter from a dropdown.
<div id="viewList">
<input class="search" placeholder="Search" />
<form id="filter">
<select id ="gname" name="gname">
<option value="0">css</option>
<option value="1">tf2</option>
<option value="2" >teamspeak3</option>
<option value="3" >csgo</option>
<option value="3" >gmod</option>
</select>
<select id ="sloc" name="sloc">
<option value="0">US</option>
<option value="1" >EU</option>
</select>
</form>
<button id="filter-results" type="button">Filter Results</button>
<table width="891" align="center" cellspacing='0'>
<thead> <!-- cellspacing='0' is important, must stay -->
<tr>
<th class="sort" data-sort="sname" width="350" >Server Name</th>
<th class="sort" data-sort="gname" style="padding:0px 0px 0px 0px">Game</th>
<th class="sort" data-sort="sloc" style="padding:0px 0px 0px 0px">Loc</th>
<th class="sort" data-sort="ipadd" width="204">IP Address</th>
<th class="sort" data-sort="numply" width="91">Players</th>
<th width="258">Map</th>
<th></th>
</tr>
</thead>
<!-- Table Header -->
<tbody class="list">
<tr>
<td class='sname'>[GFLClan.com]Minigames :: FastDL, Store, and more!</td>
<td class='gname'><a title='css'><img src='Flags/css.png'/></a></td>
<td class='sloc'><img src='Country/US.png'/></td>
<td class='ipadd'>74.91.119.32:27015</td>
<td class='numply'>14/40</td>
<td class='mapn'>mg_ski_mountain_dev</td>
<td><a href='steam://connect/74.91.119.32:27015' title='Join!'><img src='button/join.gif'/>
</td>
<tr>
<td class='sname'>[GFLClan.com] *MarioKart* 2+3 | Instant Respawn | No Lag</td>
<td class='gname'><a title='tf2'><img src='Flags/tf2.png'/></a></td>
<td class='sloc'><img src='Country/US.png'/></td>
<td class='ipadd'>74.91.115.139:27015</td>
<td class='numply'>15/32</td>
<td class='mapn'>dm_mariokart2_b3</td>
<td><a href='steam://connect/74.91.115.139:27015' title='Join!'><img src='button/join.gif'/></td>
</tr>
</tbody>
Using this javascript
var options = {
valueNames: [ 'sname', 'gname', 'sloc', 'ipadd', 'numply', 'mapn' ]
};
var featureList = new List('viewList', options);
$('#filter-results').click(function() {
featureList.filter(function(item) {
var gname = $("#gname").text();
var sloc = $("#sloc").text();
if (item.values().gname == gname && item.values().sloc == sloc) {
return true;
} else {
return false;
}
});
return false;
});
The filter doesn't work. What I want to do is for users to use drop down menu to show only results they need. So if they select css and US, it should only show gname tds with 'css' in and sloc tds with 'US' in. I don't know if the reason it doesn't work is because I am using images in gname and sloc classes. Does anyone know how to get this to work?
Instead of,
$("#gname").text();
you should be using
$("#gname option:selected").text();