Javascript 获取html表格单元格的渲染高度
我正在为一个通过javascript动态生成的网页编写日历。然而,我似乎无法让所有的细胞都保持相同的高度,除非它们都是空的。我在每个单元格中放置了div,将宽度和高度设置为fixed,设置max height和max widths,不管怎样,表似乎完全忽略了CSS,并根据自己的喜好调整大小。让这个问题更加恼火的是,填充的表格单元格和空的表格单元格之间的差异只有7个像素 我最近的想法是编写一个javascript/jquery函数,它遍历单元格,找到最大的单元格,并调整所有其他单元格的大小,使其与该单元格的大小相同。如果单元格的宽度和高度都相同,我并不特别关心它们有多大。但是,我发现jquery的height和width函数在解析为int时,只返回为height和width设置的CSS值,或者如果没有设置值或者该值设置为auto return 0。是否有一个函数可以给出表格单元格的绝对宽度和高度?或者,是否有一种方法可以使表格单元格的尺寸完全固定,无论内容如何,它们都不会调整大小 HTML: 生成表的Javascript:Javascript 获取html表格单元格的渲染高度,javascript,jquery,html,css,html-table,Javascript,Jquery,Html,Css,Html Table,我正在为一个通过javascript动态生成的网页编写日历。然而,我似乎无法让所有的细胞都保持相同的高度,除非它们都是空的。我在每个单元格中放置了div,将宽度和高度设置为fixed,设置max height和max widths,不管怎样,表似乎完全忽略了CSS,并根据自己的喜好调整大小。让这个问题更加恼火的是,填充的表格单元格和空的表格单元格之间的差异只有7个像素 我最近的想法是编写一个javascript/jquery函数,它遍历单元格,找到最大的单元格,并调整所有其他单元格的大小,使其与
function loadCalendar(cd) {
document.getElementById("my_disp").innerText = findMonthandYear(cd.getMonth(), cd.getFullYear());
document.getElementById("my_disp").setAttribute("data-month", cd.getMonth());
document.getElementById("my_disp").setAttribute("data-year", cd.getFullYear());
var sd = findMonthStart(cd.getMonth(), cd.getFullYear());
for (var i = 0; i < sd; i++) {
document.getElementById("wk1").innerHTML += ((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'></div></td>" : "<td class='cal_spaces'><div class='fix_cells'></div></td>");
}
var dc = 1;
for (var i = sd; i < 7; i++) {
document.getElementById("wk1").innerHTML += (((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'><p class='cal_date_nums' style='color: #BC7777;'>" : "<td class='cal_spaces'><div class='fix_cells'><p class='cal_date_nums'>") + dc + "</p><div class='cal_event_links' id='" + cd.getFullYear() + "-" + parseM(cd.getMonth()) + "-" + parseD(dc) + "'></div></div></td>");
dc++;
}
var dim = getDaysInMonth(cd);
for (var w = 2; w <= 6; w++) {
for (var i = 0; i < 7; i++) {
if (dc <= dim) document.getElementById("wk" + w).innerHTML += (((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'><p class='cal_date_nums' style='color: #BC7777;'>" : "<td class='cal_spaces'><div class='fix_cells'><p class='cal_date_nums'>") + dc + "</p><div class='cal_event_links' id='" + cd.getFullYear() + "-" + parseM(cd.getMonth()) + "-" + parseD(dc) + "'></div></div></td>");
else document.getElementById("wk" + w).innerHTML += ((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'></td>" : "<td class='cal_spaces'></td>");
dc++;
}
if (dc > dim) {
if (w !== 6) {
for (var i = 0; i < 7; i++)
document.getElementById("wk6").innerHTML += ((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'></div></td>" : "<td class='cal_spaces'><div class='fix_cells'></div></td>");
}
break;
}
}
for (var i = 0; i < evntsInfo.evntsCount; i++) {
var dtid = removeTimeFromDates(evntsInfo.evntsDates[i]);
if (document.getElementById(dtid) != null)
document.getElementById(dtid).innerHTML += "<a class='cal_actual_links' title='Submitted By: " + evntsInfo.evntsHosts[i] + "\nLocation: " + evntsInfo.evntsLocs[i] + "\nWhen: " + formatDate(evntsInfo.evntsDates[i]) + "\nTickets: " + evntsInfo.evntsTC[i] + "' href=/Home/viewTicketRequests?id=" + evntsInfo.evntsIDs[i] + ">" + evntsInfo.evntsTitles[i] + "</a>\n";
}
currentDayColoring();
fixSizes();
}
function currentDayColoring() {
var cd = new Date();
var dtid = (cd.getFullYear().toString() + "-" + parseM(cd.getMonth()).toString() + "-" + parseD(cd.getDate()).toString());
if (document.getElementById(dtid) != null) {
document.getElementById(dtid).parentElement.parentElement.style.backgroundColor = "#D7E4EA";
document.getElementById(dtid).parentElement.firstChild.style.fontSize = "x-large";
}
}
function fixSizes() {
var mheight = 0;
var spaces = document.getElementsByClassName("cal_spaces");
for (var i = 0; i < spaces.length; i++) {
if (spaces[i].offsetHeight > mheight)
mheight = spaces[i].offsetHeight;
console.log("mheight: " + mheight);
}
for (var i = 0; i < spaces.length; i++) {
spaces[i].offsetHeight = mheight;
}
}
使用chrome的F12调试工具。检查大小电池。寻找任何会使它们变形的东西,听起来像是边距或填充物。您确实需要为此类问题提供一个HTML另存为示例页面,最好是在JSFiddle.net中:我在我的原始文章中添加了必要的代码。还有一点需要注意:我使用了jQuery的height函数,但我最近的一次徒劳尝试是使用常规Javascript的offsetHeight。下面是一个使用您的代码的小把戏:@Alex Morrise:如果您都要制作JSFIDLE,请做一个有效的:我没有做小提琴的原因是因为我使用的是mvc,加载页面主体的函数具有从模型传入的参数。
table {
padding: 15px;
border-radius: 2px;
background-color:#fff;
}
.list_spaces {
border: 1px solid #e1e1e1;
text-align: center;
}
.day_spaces {
background-image: url("../../Content/linen.png");
text-align: center;
width: 100px;
overflow: hidden;
}
.cal_spaces {
width: auto;
height: auto;
vertical-align: 50px;
border: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
border-left: 1px solid #e1e1e1;
overflow: hidden;
}
.cal_date_nums {
text-align: right;
position: relative;
font-size: 16px;
color: #999999;
opacity: 0.58;
right: 12px;
top: 12px;
}
.cal_event_links {
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.cal_actual_links {
text-align: left;
font-size: 12px;
}
.fix_cells {
width: 100px;
height: 114px;
}
function loadCalendar(cd) {
document.getElementById("my_disp").innerText = findMonthandYear(cd.getMonth(), cd.getFullYear());
document.getElementById("my_disp").setAttribute("data-month", cd.getMonth());
document.getElementById("my_disp").setAttribute("data-year", cd.getFullYear());
var sd = findMonthStart(cd.getMonth(), cd.getFullYear());
for (var i = 0; i < sd; i++) {
document.getElementById("wk1").innerHTML += ((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'></div></td>" : "<td class='cal_spaces'><div class='fix_cells'></div></td>");
}
var dc = 1;
for (var i = sd; i < 7; i++) {
document.getElementById("wk1").innerHTML += (((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'><p class='cal_date_nums' style='color: #BC7777;'>" : "<td class='cal_spaces'><div class='fix_cells'><p class='cal_date_nums'>") + dc + "</p><div class='cal_event_links' id='" + cd.getFullYear() + "-" + parseM(cd.getMonth()) + "-" + parseD(dc) + "'></div></div></td>");
dc++;
}
var dim = getDaysInMonth(cd);
for (var w = 2; w <= 6; w++) {
for (var i = 0; i < 7; i++) {
if (dc <= dim) document.getElementById("wk" + w).innerHTML += (((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'><p class='cal_date_nums' style='color: #BC7777;'>" : "<td class='cal_spaces'><div class='fix_cells'><p class='cal_date_nums'>") + dc + "</p><div class='cal_event_links' id='" + cd.getFullYear() + "-" + parseM(cd.getMonth()) + "-" + parseD(dc) + "'></div></div></td>");
else document.getElementById("wk" + w).innerHTML += ((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'></td>" : "<td class='cal_spaces'></td>");
dc++;
}
if (dc > dim) {
if (w !== 6) {
for (var i = 0; i < 7; i++)
document.getElementById("wk6").innerHTML += ((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'></div></td>" : "<td class='cal_spaces'><div class='fix_cells'></div></td>");
}
break;
}
}
for (var i = 0; i < evntsInfo.evntsCount; i++) {
var dtid = removeTimeFromDates(evntsInfo.evntsDates[i]);
if (document.getElementById(dtid) != null)
document.getElementById(dtid).innerHTML += "<a class='cal_actual_links' title='Submitted By: " + evntsInfo.evntsHosts[i] + "\nLocation: " + evntsInfo.evntsLocs[i] + "\nWhen: " + formatDate(evntsInfo.evntsDates[i]) + "\nTickets: " + evntsInfo.evntsTC[i] + "' href=/Home/viewTicketRequests?id=" + evntsInfo.evntsIDs[i] + ">" + evntsInfo.evntsTitles[i] + "</a>\n";
}
currentDayColoring();
fixSizes();
}
function currentDayColoring() {
var cd = new Date();
var dtid = (cd.getFullYear().toString() + "-" + parseM(cd.getMonth()).toString() + "-" + parseD(cd.getDate()).toString());
if (document.getElementById(dtid) != null) {
document.getElementById(dtid).parentElement.parentElement.style.backgroundColor = "#D7E4EA";
document.getElementById(dtid).parentElement.firstChild.style.fontSize = "x-large";
}
}
function fixSizes() {
var mheight = 0;
var spaces = document.getElementsByClassName("cal_spaces");
for (var i = 0; i < spaces.length; i++) {
if (spaces[i].offsetHeight > mheight)
mheight = spaces[i].offsetHeight;
console.log("mheight: " + mheight);
}
for (var i = 0; i < spaces.length; i++) {
spaces[i].offsetHeight = mheight;
}
}