Javascript 当图像存在于第二列的第一行时，jQuery 动态更改表中第一列的 padding-top
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14941782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery to dynamically change padding-top of first column in a table when image exists in the first row of the second column
提问by Andy Dudley
In a two column table (where both columns are set to valign top and the text is set to text-align: baseline), if an image exists in the first row of the second column and the image height is taller than the text itself, the text in both columns is not aligned.
在一个双列表中（其中两列都设置为 valign top 并且文本设置为 text-align:baseline），如果第二列的第一行中存在图像并且图像高度高于文本本身，两列中的文本未对齐。
I want to add padding-top dynamically to the first column when an image exists in the first row of the second column. If the window is resized and the image is no longer in the first row (or a new image is pushed into the first row) the padding-top of the text in column 1 should automatically update to ensure the baseline text lines up across both columns.
当第二列的第一行中存在图像时，我想将 padding-top 动态添加到第一列。如果调整窗口大小并且图像不再位于第一行（或新图像被推入第一行），则第 1 列中文本的填充顶部应自动更新以确保基线文本在两列中对齐.
<html>
<head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
</head>
<body>
<table>
<tr>
<td style="vertical-align:top"><p class="tabhead">Note:</p></td>
<td style="vertical-align:top"><p class="tabtext">This is text and - z0mg no, not an image!<img src="http://files.softicons.com/download/web-icons/minicons-numbers-icons-by-icojam/png/16x16/blue/025.png" /> what will we do?<br />Save us!</p></td>
</tr>
</table>
</body>
</html>
stylesheet
样式表
.tabhead
{
display: block;
vertical-align: top;
font-family: "Tahoma", verdana, arial, helvetica, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 9pt;
}
.tabtext
{
font-family: "Tahoma", verdana, arial, helvetica, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 9pt;
vertical-align: baseline;
}
回答by rnirnber
To make it a bit easier, let's add an id="column_1" attribute on your first td element in the table.
为了使它更容易一些，让我们在表中的第一个 td 元素上添加一个 id="column_1" 属性。
$(document).ready(function()
{
window.setInterval("update_tbl_padding()", 100);
}
function update_tbl_padding()
{
//if column 1 has either a direct or indirect img element as a descendant
//if you wanted it to be a direct child element the selector would be
//$("#column_1 > img")
if($("#column_1 img").size() >= 1)
{
//just an example
var pad_top_val = "5px";
$("#column_1").css("padding-top", pad_top_val);
}
//since you're checking to see if a new image is pushed in, I'm guessing you
//would want to check to see if its taken out too...hence this else clause
else
{
var pad_top_default_val = "0px";
$("#column_1").css("padding-top", pad_top_default_val);
}
}
haven't checked the code for synthax errors or anything but it should be pretty easy to follow.
还没有检查 synthax 错误或任何东西的代码，但它应该很容易理解。
回答by SagaramVijay
create style as below
table.padtop120 {
padding-top: 120px;
}
and in javascript add below statement for you table or row id as below
<script>
$( document ).ready(function() {
$("#tableid").addClass('padtop120');
});
</script>
it'll be applied dynamically
