jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – 当第二列的第一行中存在图像时,jQuery动态更改表中第一列的填充顶部大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在两列表中(其中两列都设置为valign top并且文本设置为text-align:baselinE),如果第二列的第一行中存在图像且图像高度高于文本本身,两列中的文本未对齐.

我想在第二列的第一行中存在图像时动态地向第一列添加填充顶部.如果调整窗口大小并且图像不再位于第一行(或者新图像被推入第一行),则第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>

样式表

.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",sans-serif;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-size: 9pt;
        vertical-align: baseline;
     }

解决方法

为了更容易一些,让我们在表格的第一个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);
    }
}

没有检查SYNhax错误代码或任何东西,但它应该很容易遵循.

大佬总结

以上是大佬教程为你收集整理的javascript – 当第二列的第一行中存在图像时,jQuery动态更改表中第一列的填充顶部全部内容,希望文章能够帮你解决javascript – 当第二列的第一行中存在图像时,jQuery动态更改表中第一列的填充顶部所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。