我正在使用 ajax 从数据库中获取数据。在这个数据中,我有一个 textarea
我想在每个页面的底部对齐,每个 textarea
都有不同的数据。我尝试了 CSS positions
,它只适用于第一页,因为我在每个 textarea
中都有不同的数据。
var response = {
row1: [{
group: 'Group A'
}],
row2: [{
team: 'Team A',
player: 'Jema',
result: 43,
note: 'won'
},
{
team: 'Team B',
player: 'Deno',
result: 34,
note: 'lost'
},
{
team: 'Team B',
player: 'Niob',
result: 56,
note: 'lost'
},
{
team: 'Team B',
player: 'Skion',
result: 49,
note: 'lost'
},
],
};
var teams = {}
let count = -1;
response.row2.forEach(e => {
if (!(e.team in teams)) {
count++;
teams[e.team] = ["", e.note];
}
teams[e.team][0] += "<tr><td>" + e.player + "<td><input type='text' value='" + e.result + "'></td></tr>";
})
var table = "";
console.log(teams)
for (let team in teams) {
table += '<h2 class="group" style="border: 1px solid black">' +
response.row1[0].group + '</h2>'
table += '<table class="table bordered"><thead><th>Name</th><th>Result</th>
</thead></tbody>';
table += '<tr colspan="2" ><td>' + team + '</td></tr>';
table += teams[team][0];
table += '<div class="notesFooter"><textarea class="note">' +
catg[category][1] + '</textarea></div>';
table += '</tbody></table>';
if (count) table += "<div class='break'></div>"
count--;
}
$("#print").html(table);
var PrintThis = document.getElementById('print');
var PrintStyle = '<style type="text/css">' +
'@media print{' +
'.break { page-break-after: always }' +
'}' +
'</style>';
PrintStyle += PrintThis.innerHTML;
myWin = window.open("");
myWin.document.write(PrintStyle);
myWin.print();
myWin.close();
最佳答案
固定位置或绝对位置会导致文本区域重叠,因此我认为您需要将文本区域相对于顶部的位置。您可以在 PrintStyle
var 中添加此 .textarea{margin-top: 100%;}
并将类 textarea
添加到每个文本区域。这里的例子:https://jsfiddle.net/L67rohc1/
但是如果你有不同行数的表格,这个 margin-top: 100%;
是不准确的,你应该计算每个 texarea 的上边距,使用这样的东西:
$(".table").each(function(i){
prev = $(this).outerHeight()/2;//<-- table height
//90vh in chrome to go closer to the bottom
$(this).next().css( "margin-top", "calc(70vh - "+prev+"px)" );
})
vh
等于视口(viewport)初始包含 block 高度的 1%。似乎 70 对于 Firefox 和 90 对于 Chrome 是一个很好的值(value),但请记住,这个数字可能会改变。这里是完整的例子:https://jsfiddle.net/ob30p19d/
关于javascript - 对齐打印页面底部的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52236244/