gpt4 book ai didi

javascript - 对齐2表,搜索表

转载 作者:太空宇宙 更新时间:2023-11-04 06:06:08 25 4
gpt4 key购买 nike

对于我的家庭作业,我必须用标签做多个表格。所以我想对齐我的 table ,我可以对齐 1,但是当我想对齐另一个时,一切都坏了。我的搜索栏也有问题,我有多个搜索栏,而且,当我在第二张 table 上搜索时,我的第一张 table 坏了。

我尝试使用不同的 JS 来调整我的表的大小,但是,那没有用

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">&nbsp;</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">&nbsp;</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>

我想将搜索栏表与我在两个表上的表对齐,所以在第一个有效但在第二个无效,我不明白我该怎么做。

目前看起来是这样的,我的数据没有对齐:

My two tables

最佳答案

要具有相同大小的标题行(即对齐标题单元格),只需使用具有双标题行的一个表格。一个用于 select和一个 title/labels

已更新

如果您使用JUST ONE(one - 表示一个包含 filterdata/content 的表,在您的示例中< strong>两个表而不是四个) table对齐所有列没有问题(即删除 <table id="tablita"> 并如图所示合并它 <table id="test"> )。如果您需要具有如图所示的 html 模板结构(您不能使用一个表),则需要使用 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());
});
}

类似于此代码片段,但您必须在任何表更新后调用该方法(即,将行添加/删除/更新到表或其他数据/样式/其他大小更改其中一个表)。 恕我直言 更简单的更改模板结构以具有JUST ONE 表。以及使用一张表而不是分开的结果

enter image description here

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">&nbsp;</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">&nbsp;</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>

关于javascript - 对齐2表,搜索表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56847486/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com