对不起,我的英语不好,希望您能理解我遇到的那种问题。因此,这是代码,它的作用是调整div.cards的大小。我的意思是,当我全屏显示窗口时,表格正确显示了div.cards。因此,当我开始更改窗口的大小时,其中一些卡会更改某些行中的offsetHeight(始终取决于它们上的文本)。我已经附上了桌子的图像(带有非全屏窗口)。因此,正如您所看到的,当我更改窗口时,这些卡片也将更改为offsetHeight,因此,我已经实现的是对行中具有最高div.card的所有div.card应用相同的高度。我仍然卡住的地方是:当我将窗口返回全屏时,这些div.cards应该回到其原始的offsetHeight,但仍然无法理解该怎么做。
我已经尝试过,就像将所有div.cards的offsetHeight放入数组然后以某种方式还原它们一样,但是没有成功。my table
var table = document.getElementById("table");
var row, n, column, m, mColumn, t;
var maxOffSet = 0, minOffSet = 0;
for (row = 0, n = table.rows.length; row < n; row++) {
for (column = 0, m = table.rows[row].cells.length; column < m; column++) {
console.log('Row: ' + [row] + ' Column:' + [column] + ' clHeight: ' + table.rows[row].getElementsByClassName("card")[column].offsetHeight);
// if (maxOffSet < table.rows[row].getElementsByClassName("card")[column].offsetHeight) {
// maxOffSet = table.rows[row].getElementsByClassName("card")[column].offsetHeight;
// }
}
// table.rows[row].style.minHeight = maxOffSet;
// for (mColumn = 0, t = table.rows[row].cells.length; mColumn < t; mColumn++) {
// table.rows[row].getElementsByClassName("card")[mColumn].style.height = maxOffSet + 'px';
// }
}
};
HTML:
<tbody>
<tr>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="ragioneria_da_smistare_todo">1</span><span class="counter" id="ragioneria_da_smistare_watch">(0) </span><span class="stagestext" id="ragioneria_da_smistare_Descr">Ragioneria da smistare</span></div>
</div>
</div>
</td>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="ragioneria_rifiutati_todo">0</span><span class="counter" id="ragioneria_rifiutati_watch">(0) </span><span class="stagestext" id="ragioneria_rifiutati_Descr">Ragioneria rifiutati</span></div>
</div>
</div>
</td>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="responsabile_da_smistare_todo">0</span><span class="counter" id="responsabile_da_smistare_watch">(0) </span> <span class="stagestext" id="responsabile_da_smistare_Descr">Responsabile da smistare</span> </div>
</div>
</div>
</td>
</tr>
<tr>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="ufficio_di_competenza_todo">0</span><span class="counter" id="ufficio_di_competenza_watch">(0) </span> <span class="stagestext" id="ufficio_di_competenza_Descr">Ufficio di competenza</span> </div>
</div>
</div>
</td>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="responsabile_appr_pagamento_todo">0</span><span class="counter" id="responsabile_appr_pagamento_watch">(0) </span> <span class="stagestext" id="responsabile_appr_pagamento_Descr">Responsabile approvazione pagamento</span> </div>
</div>
</div>
</td>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="ragioneria_appr_pagamento_todo">0</span><span class="counter" id="ragioneria_appr_pagamento_watch">(0) </span> <span class="stagestext" id="ragioneria_appr_pagamento_Descr">Ragioneria approvazione pagamento</span> </div>
</div>
</div>
</td>
</tr>
<tr>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="direzione_todo">0</span><span class="counter" id="direzione_watch">(0) </span> <span class="stagestext" id="direzione_Descr">Direzione</span> </div>
</div>
</div>
</td>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="presidenza_todo">0</span><span class="counter" id="presidenza_watch">(0) </span> <span class="stagestext" id="presidenza_Descr">Presidenza</span> </div>
</div>
</div>
</td>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="sospesa_todo">0</span><span class="counter" id="sospesa_watch">(0) </span> <span class="stagestext" id="sospesa_Descr">Sospesa</span> </div>
</div>
</div>
</td>
</tr>
<tr>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="ragioneria_rifiuta_pagamento_todo">0</span><span class="counter" id="ragioneria_rifiuta_pagamento_watch">(0) </span> <span class="stagestext" id="ragioneria_rifiuta_pagamento_Descr">Ragioneria rifiuta pagamento</span> </div>
</div>
</div>
</td>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="ragioneria_da_pagare_todo">0</span><span class="counter" id="ragioneria_da_pagare_watch">(0) </span> <span class="stagestext" id="ragioneria_da_pagare_Descr">Ragioneria da pagare</span> </div>
</div>
</div>
</td>
<td style="cursor: pointer">
<div class="card">
<div class="card-body">
<div class="content"> <span class="counterComp" id="ragioneria_pagam_parziale_todo">0</span><span class="counter" id="ragioneria_pagam_parziale_watch">(0) </span> <span class="stagestext" id="ragioneria_pagam_parziale_Descr">Ragioneria pagamento parziale</span>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
CSS:
.card {
/*max-width: 500px*/;
margin: 5px 5px 5px 5px;
/*max-height: 60px;*/
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
border-radius: .25rem;
-webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
}
.card-body {
flex: 1 1 auto;
min-height: 1px;
padding: 1rem;
/*display: flex;*/
justify-content: center;
align-items: center;
}
.content {
display: table;
/*width: 75%;*/
vertical-align: middle;
}
.content > span {
display: table-cell;
vertical-align: middle;
}
CSS-JS:
$(document).ready(function () {
var style = document.createElement('style');
style.innerHTML = '\
body {\
display: none;\
}\
.logo-div {\
background-image: url(view.do?id=1041&className=LOGO);\
height: 200px;\
width: auto;\
background-repeat: no-repeat;\
background-origin: content-box;\
background-position: center;\
margin-bottom: 5px;\
/*border-bottom: 5px solid #ef5114;*/\
}\
.stagestext {\
color: #ef5114;\
font-weight: bold;\
font-size: 1.3em;\
vertical-align: 10%;\
text-align: start;\
padding-left: 20px;\
/*padding-right: 20%;*/\
}\
.datetext {\
color: #546E7A;\
font-weight: bold;\
font-size: 1.5em;\
}\
.counter {\
/*border-right: 5px solid #1bb0e1;*/\
font-size: 2em;\
color: #1bb0e1;\
/*padding-left: 5px;*/\
/*cursor: pointer;*/\
width: 10%;\
}\
.counterComp {\
font-size: 2em;\
color: #1bb0e1;\
/*padding-right: 5px;*/\
/*cursor: pointer;*/\
width: 10%;\
}\
.counter.error {\
border-left-color: red;\
color: red;\
}\
.counter.warning {\
border-left-color: orange;\
color: orange;\
}\
.counter.success {\
border-left-color: green;\
color: green;\
}\
.badge-table {\
width: 100%;\
/*border-bottom\: 5px solid #ef5114;*/\
}\
/*.badge-table tbody tr td {\
padding: padding: 5px 3px;\
}*/\
.datacorrente-table {\
width: 100%;\
/*border-bottom\: 5px solid #ef5114;*/\
}\
.datacorrente-table tbody tr td {\
padding-top: 5px;\
padding-right: 5px;\
padding-left: 5px;\
padding-bottom: 10px;\
width: 25%\
}\
.badge-title {\
font-size: 2em;\
vertical-align: middle;\
width: 100%;\
}\
.template-div {\
display: inline-block;\
border-radius: 6px;\
color: #ffffff;\
text-align: left;\
}\
.padder-div {\
padding-left: 10px;\
padding-right: 10px;\
}\
.column-left {\
width: 49.5%;\
float: left;\
display: inline-block;\
}\
.column-right {\
width: 49.5%;\
float: right;\
display: inline-block;\
}\
.label-left{\
padding-left: 10px;\
font-size: 15px;\
display: inline-block;\
}\
.label-right{\
padding-right: 10px;\
font-size: 15px;\
float: right;\
}\
.dashboard-divider{\
padding-left: 10px;\
padding-right: 10px;\
}\
#title-card {\
width: 100%;\
background-color: rgb(158, 158, 158);\
border-width: 1px;\
text-align: center;\
}\
#table-div{\
width: 100%;\
border-width: 1px;\
text-align: center;\
}\
td {\
padding: 5px 5px 5px 5px;\
}\
';
UPDATE我修改了javascript,但是窗口变得非常缓慢:(
window.addEventListener('resize', function(event){
resetTable();
resizeTable();
});
function resetTable() {
console.log('Rows: ' + document.getElementById("table").rows.length);
var table = document.getElementById("table");
var row, n, column, m;
for (row = 0, n = table.rows.length; row < n; row++) {
for (column = 0, m = table.rows[row].cells.length; column < m; column++) {
console.log('Row: ' + [row] + ' Column:' + [column] + ' clHeight: ' + table.rows[row].getElementsByClassName("card")[column].offsetHeight);
table.rows[row].getElementsByClassName("card")[column].style.minHeight = 'auto';
}
}
}
function resizeTable() {
console.log('Rows: ' + document.getElementById("table").rows.length);
var table = document.getElementById("table");
var row, n, column, m, mColumn, t;
var maxOffSet = 0;
for (row = 0, n = table.rows.length; row < n; row++) {
for (column = 0, m = table.rows[row].cells.length; column < m; column++) {
console.log('Row: ' + [row] + ' Column:' + [column] + ' clHeight: ' + table.rows[row].getElementsByClassName("card")[column].offsetHeight);
if (maxOffSet < table.rows[row].getElementsByClassName("card")[column].offsetHeight) {
maxOffSet = table.rows[row].getElementsByClassName("card")[column].offsetHeight;
}
}
for (mColumn = 0, t = table.rows[row].cells.length; mColumn < t; mColumn++) {
// var t = maxOffSetRow - table.rows[row].getElementsByClassName("card")[mColumn].offsetHeight;
table.rows[row].getElementsByClassName("card")[mColumn].style.minHeight = maxOffSet + 'px';
table.rows[row].getElementsByClassName("card")[mColumn].style.minHeight = 'auto';
}
}
}
UPDATE没关系,我已经评论了console.log的输出,它的工作原理很吸引人。因此,请自己解决:D
我自己找到了解决方案:基本上,我引入了一个将最大OffsetHeight存储在行中的数组,然后将其应用于所有div.card,完成该行的清理后,他就可以为新行ecccetera填充数据。 ..
JS
window.addEventListener('resize', function(event){
resetTable();
resizeTable();
});
function resetTable() {
var table = document.getElementById("table");
var row, n, column, m;
for (row = 0, n = table.rows.length; row < n; row++) {
for (column = 0, m = table.rows[row].cells.length; column < m; column++) {
//console.log('Row: ' + [row] + ' Column:' + [column] + ' clHeight: ' + table.rows[row].getElementsByClassName("card")[column].offsetHeight);
table.rows[row].getElementsByClassName("card")[column].style.minHeight = 'auto';
}
}
}
function resizeTable() {
//console.log('Rows: ' + document.getElementById("table").rows.length);
var table = document.getElementById("table");
var row, n, column, m, mColumn, t, arr = [];
for (row = 0, n = table.rows.length; row < n; row++) {
for (column = 0, m = table.rows[row].cells.length; column < m; column++) {
//console.log('Row: ' + [row] + ' Column:' + [column] + ' clHeight: ' + table.rows[row].getElementsByClassName("card")[column].offsetHeight);
arr.push(table.rows[row].getElementsByClassName("card")[column].offsetHeight);
}
for (mColumn = 0, t = table.rows[row].cells.length; mColumn < t; mColumn++) {
//console.log('Row: ' + [row] + ' Column:' + [mColumn] + ' clHeight: ' + Math.max.apply(Math, arr));
table.rows[row].getElementsByClassName("card")[mColumn].style.minHeight = Math.max.apply(Math, arr) + 'px';
}
arr = [];
}
}