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

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():克隆不可见的div(即要添加到多个位置)
• .appendTo(this):附加到匹配的td(this指的是匹配的DOM元素td)
• .show():移除显示:无

JsFiddle Demo

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

• 切换到使用类
  或
• 处理 ID，并确保它们是唯一的