jquery - 动态添加图像时，如何阻止 HTML 表格更改单元格高度？

Question

I'm trying to get an image to appear next to a select when an option is chosen. 不幸的是，当图像被添加时，整个桌子都会震动。我试过改变填充、高度和宽度，但我基本上是在黑暗中四处乱窜。如果有人可以帮助我，我将不胜感激。这是小提琴：

http://jsfiddle.net/vwWb9/7/

这是代码。我已将它们全部放入一个文件中，因此您可以轻松地将其复制并粘贴到您的 TE 中查看。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">


    @CHARSET "ISO-8859-1";

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video
    {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

body {
    line-height: 1
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section
    {
    display: block
}

nav ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote:before,blockquote:after,q:before,q:after {
    content: none
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold
}

del {
    text-decoration: line-through
}

abbr[title],dfn[title] {
    border-bottom: 1px dotted;
    cursor: help
}

table { /*  border-collapse:collapse;*/
    border-spacing: 0
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0
}

input,select {
    vertical-align: middle
}

/**********CUSTOMISED***********/  
body {
    font-size: 62.5%;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1em;
}

h5 {
    font-size: 0.8em;
}

h6 {
    font-size: 0.7em
}
/**********END CUSTOMISED***********/
#app_cont {
    border: 1px solid grey;
    height: auto;
    width: 500px;
    margin: 200px auto 200px auto;
    background: #efefef;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    font-family: Arial;
    font-size: 1.6em;
    padding: 10px
}

#ab_cont {
    float: left;
    height: auto;
    width: 100%;
    margin: 10px 0 0px 0;
}

#btn_cont {
    border: 1px solid grey;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #dcdcdc;
    clear: both;
    padding: 10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.app_btns {
    margin: 0px 0px 0px 0px;
    min-width: 90px;
    text-align: center;
    font-size: 16px;
    font-family: Arial;
    font-weight: normal;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #ababab;
    padding: 9px 18px;
    text-decoration: none;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #ededed),
        color-stop(100%, #dfdfdf) );
    background: -moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%);
    background: -ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    filter: progid :                                                        
                                          DXImageTransform.Microsoft.gradient
        ( 







                                                   startColorstr = 


                                                     '#ededed', endColorstr = 




                                        '#dfdfdf' );
    background-color: #ededed;
    color: #777777;
    display: inline-block;
    text-decoration: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.app_btns:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #dfdfdf),
        color-stop(100%, #ededed) );
    background: -moz-linear-gradient(center top, #dfdfdf 5%, #ededed 100%);
    background: -ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    filter: progid :                                                        
                                          DXImageTransform.Microsoft.gradient
        ( 







                                                   startColorstr = 


                                                     '#dfdfdf', endColorstr = 




                                        '#ededed' );
    background-color: #dfdfdf;
    cursor: pointer;
}

.app_btns:active {
    position: relative;
    top: 1px;
}

.disabled {
    margin: 0;
    min-width: 90px;
    text-align: center;
    font-size: 16px;
    font-family: Arial;
    font-weight: normal;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid grey;
    padding: 9px 18px;
    text-decoration: none;
    background: rgb(156, 156, 156);
    color: #efefef !important;
    display: inline-block;
    text-decoration: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.disabled:hover {
    cursor: default;
}

#opts_tbl {
    margin-bottom: 5px;
    table-layout: fixed;
    width:500px;

}

#opts_tbl td {


    padding: 15px 0px 15px 0px;

    overflow: hidden;
}

.opt_slcts {
    width: 165px;
    padding: 4px 3px 4px 0px;
    text-indent: 1px;
    line-height: 23px;

}

.val_ers {

    font-size: 0.8em;
    color: #1133aa;
}

.val_img {
    float:left;
    height: 24px;
    width: 24px;
    padding: 0px 0px 0px 15px;
}



    </style>
</head>
<body>
    <div id="app_cont">
<div id="opts_pnl">

                <table id="opts_tbl">
                    <tr>
                        <td>
                            <label for="num_slct" class="opt_labels">Options 1:</label>
                        </td>
                        <td>
                            <select name="num_slct" id="num_slct" class="opt_slcts">
                                <option value="-"   >-</option>
                                <option value="5"   >5</option>
                                <option value="10"  >10</option>
                                <option value="15"  >15</option>
                                <option value="20"  >20</option>
                                <option value="25"  >25</option>
    <!--                        <option value="3"   >3</option>                             -->
                            </select> 
                        </td>
                        <td id="num_slct_er" class="val_ers">Please make a selection.</td>
                    </tr>
                    <tr>
                        <td id="tl_c">
                            <label for="top_slct" class="opt_labels">Options 2:</label>
                        </td>
                        <td id="tr_c">
                            <select name="top_slct" id="top_slct" class="opt_slcts">
                                <option value="-"       id="opt-1"                      >-</option>
                                <option value="rnd_sel" id="opt-2"                      >Option</option>
                                <option value="blank"   id="blank" disabled="disabled"  ></option>
                                <optgroup label="Misc.">
                                    <option value="cmn_mis"     id="opt-3">Option</option>
                                    <option value="ib4e"        id="opt-1">Option</option>
                                    <option value="fin_e"       id="opt-1">Option</option>
                                    <option value="dbl_cons"    id="opt-1">Option</option>
                                    <option value="slt_lts"     id="opt-6">Option</option>  
                                    <option value="plrs"        id="opt-1">Option</option>
                                    <option value="blank"       id="blank" disabled="disabled"></option>
                                </optgroup>

                            </select> 
                        </td>
                        <td id="top_slct_er" class="val_ers">Please make a selection.</td>
                    </tr>
                    <tr>
                        <td id="bl_c">
                            <label for="diff_slct"  class="opt_labels">Options 3:</label>
                        </td>
                        <td id="br_c">
                            <select name="diff_slct" id="diff_slct" class="opt_slcts">
                                <option value="-" id="item-1">-</option>
                                <option value="1" id="item-2">Option</option>
                                <option value="2" id="item-3">Option</option>
                                <option value="3" id="item-4">Option</option>
                            </select> 
                        </td>
                        <td id="diff_slct_er" class="val_ers">Please make a selection.</td>
                    </tr>
                </table>

                <div id="btn_cont" unselectable="on">
                        <a href="#" id="strt_btn" class="disabled"  unselectable="on">Start</a>
                        <a href="#" id="help_btn" class="app_btns hlp_btns"  unselectable="on">Help</a>     
                </div>

        </div><!--#opts_pnl-->
    </div><!--#app_cont -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script type="text/javascript">

$('.opt_slcts').on('change', function(){

        var errors = 0;

        $('.opt_slcts').each(function(){

            var id = this.id + "_er",
                tick = "<img src='images/tick.png' alt='tick' class='val_img'>";

            if($(this).val() == "-"){

                errors++;

                $('#' + id).empty();
                $('#' + id).append('Please make a selection.');

            } else {

                $('#' + id).empty();
                $('#' + id).append(tick);
            }

        });

        if(errors > 0){

            $('#strt_btn').attr('class', 'disabled');

        } else {

            $('#strt_btn').attr('class', 'app_btns');

        }

    });
    </script>
</body>
</html>

score 3 · Accepted Answer

我不确定这些图像应该有多大，但这似乎可以解决您的问题：

.val_ers {
    vertical-align: middle;
}

http://jsfiddle.net/vwWb9/8/

score 0 · Accepted Answer

展开是 display: table-cell 的自然行为；它忽略了高度/宽度属性。

Try to add line-height: 24px to the td, it will make the tdstart with the same height as the image.

score 0 · Accepted Answer

I see answers like:

.val_ers {
  vertical-align: middle;
}

but what happens if you create another TD-element with another image?

I would recommend to use:

#opts_tbl td {   
    vertical-align:middle;
    padding: 15px 0px 15px 0px; 
    overflow: hidden;
}

jquery - 动态添加图像时，如何阻止 HTML 表格更改单元格高度？

3 回答 3

Related

Reference