css - 类 ="input-group"占用 100% 宽度

Question

当用户单击 thead 中的单元格时，我会在其中填充一个输入元素和一个过滤器图标。问题是它使列的宽度跳跃:

Here's the fiddle :

<table class="table">
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
        </tr>
        <tr>
            <th class='clickhere'>Click here
            </th>
            <th class='clickhere'>or here</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>11</td>
            <td>21</td>
        </tr>
        <tr>
            <td>12</td>
            <td>22</td>
        </tr>
    </tbody>
<table>

    $(document).on('blur','.clickhere input',filterBlurred);
    function filterBlurred() {
        if ($(this).val() === '') {
            $(this).closest('tr').find('th').html('&nbsp;');
        }
    }
    $(document).on('click','.clickhere',filter);
    function filter() {
        $(this).html('<div class="input-group"><input class="form-control"><span class="btn input-group-addon glyphicon glyphicon-filter"> </span></div>');
        $(this).find('input').focus();
    }

Answer 1

(function() {
    var Variables = {};
    Variables.theadID = 0;

    // For every thead
    $('thead').not('.no-filter').each(function(index, thead) {
        var local = {};

        if ($(thead).attr('id')) {
            local.id = $(thead).attr('id');
        } else {
            // We'll assign a unique id
            Variables.theadID += 1;
            local.id = 'fw0Thead' + Variables.theadID;
            $(thead).attr('id',local.id);
        }
        // Set the max-width for each column via css.
        local.str = '';
        $('th',this).each(function(index, element) { // for every th inside of this thead
            if (!$(this).hasClass('no-filter')) {
                local.str += '#' + local.id;
                local.str += ' tr.fw0Filter th:nth-child(' + (index+1) + ') {';
                local.str += '  max-width:' + $(this).width() + 'px;';
                local.str += '}';
            }
        });
        local.css = document.createElement("style");
        local.css.type = "text/css";
        local.css.innerHTML = local.str;
        document.body.appendChild(local.css);
});
})();