Question

我有table和div，div的CSS属性设置为display: none（不可见），我需要添加div }动态地对我表中的每个td。我考虑过使用jQuery获取div并将其添加到我的表的td中，并将CSS属性更改为display: block（可见）。有可能吗？

我的代码：

 <table>
   <tr>
     <td></td>
   </tr>
   <tr>
     <td></td>
   </tr>
 </table>
 <div style="display:none">
   <label id="addVideo" for="uploadFileVideo">Add Video</label>
   <input id="uploadFileVideo" type='file'style="width:300px;visibility:hidden"/>                                                                                      
 </div>

Answer 1

将班级.my-table和.my-div添加到table和div，然后使用jQuery：

$('.my-table td').each(function () {
    $('.my-div')
        .clone()    
        .appendTo(this)
        .show();
});

它的作用：

$('.my-table td').each(f)：搜索所有td并为每个function执行指定的.clone()
.appendTo(this)：克隆不可见的div（将被添加到多个位置）
td：附加到匹配的this（DOM引用匹配的td元素.show()）
{{1}}：删除display：none

JsFiddle Demo

注意：虽然这会按照您的要求执行，但html将无效，因为您将生成具有相同ID的多个元素，这是非法的。因此

切换到使用班级或
操纵ID，并确保它们是唯一的

Answer 2

使用cloneNode。并使用appendChild

循环您的td

var tds = document.querySelectorAll('td');
tds.forEach(function(td) {
    var newDiv = div.cloneNode();
    newDiv.style.display = 'block';
    td.appendChild(newDiv);
});

不需要jQuery！ ;）

Answer 3

你能试试吗？

这样的事情！

的CSS

<style type="text/css">
    td { border: 1px solid black; }

</style>

脚本

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
    function tryIt(){
        $("td").each(function(){
            $(this).html($('.testDiv').html());
        });
    }
</script>

HTML

<body>
    <table>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
    <button onclick="tryIt()">Try It</button>
    <div class="testDiv" style="display:none">
        <label id="addVideo" for="uploadFileVideo">Add Video</label>
        <input id="uploadFileVideo" type='file'style="width:300px;"/>    
    </div>
</body>

Answer 4

以下将帮助您

HTML

<body>
 <table class="myTable">
    <tr>
        <td></td> 
    </tr>
    <tr>
        <td></td> 
    </tr>
 </table>

 <div class="testDiv" style="display:none">
     <label id="addVideo" for="uploadFileVideo">Add Video</label>
     <input id="uploadFileVideo" type='file'style="width:300px;"/>    
 </div>

脚本：

var $table = $('.myTable');
$($table).find('td').append($('.testDiv').show());

演示：

<强> Running Demo

如何动态地将div添加到现有表

4 个答案:

JsFiddle Demo