javascript - 在文本后保持相同的高度和宽度 ('' )

Question

<强> Fiddle Example

<强> Updated Example

有人可以告诉我如何使表格在删除内容后保持相同的高度和宽度吗？我想确保表中的每个 td,th,tr 在使用 text()< 后不会发生任何变化 清除内容。我想要这样做的原因是因为表固定 header 脚本在从 AJAX 注入(inject)数据后存在一些滚动问题。我需要看看 text(); 之后高度和宽度的变化是否是问题的原因。

我的尝试会在每次点击时缩小表格。

$('#cleartable').on('click', function () {

    var clear = $(".toptable td,.toptable th");
    var tableheight,tablewidth;
    clear.each(function(){
    tableheight = $(this).height(),tablewidth = $(this).width();

    });  
    clear.filter(function () {
        return $(this).index() !== 0;       
    }).text(''); 
    clear.css("width",tablewidth).css("height",tableheight);

});

HTML:

<button id="cleartable">Change</button>
<table class="toptable">
    <tr>
        <th class="image">-</th>
        <th class="image">-</th>
        <th class="image">-</th>
    </tr>
    <tr>
        <td class="description">Name</td>
        <td class="description">Alan</td>
        <td class="description">John</td>
    </tr>
    <tr>
        <td class="title">Age</td>
        <td class="title">8</td>
        <td class="title">9</td>
    </tr>
</table>

Answer 1

指定 height/width <td>的删除文本内容之前的元素(在本例中使用 .css() 方法):

$('#cleartable').on('click', function () {
    // selecting the td:first-child elements
    $('table.toptable td:first-child')
    // moving to select the siblings:
    .siblings()
    // adjusting the css:
    .css({
        // i: the index of the current element over which we're iterating,
        // h: the current value of the property we're manipulating (before adjustment),
        // these names are arbitrary, and can be anything (I use these variable-names
        // simply as a matter of personal taste, to represent the property I'm working
        // with):
        'height' : function(i,h){
            return h
        },
        'width' : function(i,w){
            return w
        }
    }).text('');
});

JS Fiddle demo .

引用文献:

• css() .
• siblings() .