Question

我将隐藏的输入组克隆到表格中：JSFiddle

输入组：

      <div id="protoTextInput" class="input-group">
        <input type="text" class="form-control input-sm" value="tw.local." />
        <span class="input-group-btn">
            <button type="button" class="btn btn-info btn-sm" onclick="autoVar(this);"><i class="glyphicon glyphicon-flash"></i></button>
        </span>
      </div>

JS-克隆：

var filterTable = $('#filterTable').find('tbody');
    var i = (filterTable.find('tr').length + 1);
    filterTable.append(
      '<tr><td>' + i + '</td><td>Test</td><td>' + '</td><td></td>' + '<td><button onclick="remColumnFromFilters(this);" type="button" title="remove from filters" class="btn btn-danger btn-sm"><i class="glyphicon glyphicon-trash"></i> remove</button></td></tr>'
    );
    // Add operator select
    filterTable.find('tr:last td:nth-child(3)').append(
      $('#protoOperators').clone().attr('id', 'operator_' + i).show()
    );
    // Add Input for value
    filterTable.find('tr:last td:nth-child(4)').append(
      $('#protoTextInput').clone().attr('id', 'txt_' + i).show()
    );

但输入组被破坏（输入和按钮之间的中断）。

知道为什么吗？

Answer 1

显然，当我第一次在JSFiddle上创建它时，我使用了更新版本的jQuery，一切正常。 - 到底是怎么回事？

在我的代码中，我使用了导致中断的jQuery v1.11.2。 v3.2.1按需运行。

所以对于遇到同样问题的人来说，这仍然存在。

Answer 2

您可以将表格内的输入设置为100％宽度并且它将解决您的样式问题：

#filterTable input.form-control.input-sm {
    width: calc(100% - 50px);
}

这是一个有效的例子：
https://jsfiddle.net/57ozm4no/2/

将引导程序输入组克隆到表中

2 个答案: