使用JS在里面使用脚本/样式标签重复div

时间：2014-11-05 16:16:03

标签： javascript jquery

我有以下HTML代码：

<table><tbody><tr><td>
      <div id="div_1">
          <style>...</style>
          <div><label> 1 </label></div>
          <div><input type="text" name="text_1"/></div>
          <script>$("#text_1").mask("99/99/9999");</script>   
          <div><label><a onclick="javascript:insert_div()"> </a></label></div>  
          ...    
      </div>                    
      ...                
      <div id="div_20">
           <style>...</style>
           <div><label> 1 </label></div>
           <div><input type="text" name="text_20"/></div>
           <script>$("#text_20").mask("99/99/9999");</script>   
           <div><label><a onclick="javascript:insert_div()"> </a></label></div>  
           ...    
      </div>
</td></tr></tbody></table>

生成这个（实际上从1到20）：

enter image description here

当用户按下箭头按钮时，我需要插入一个全新的div。它应该使用脚本和样式复制div，并在其后插入一个新数字（例如21，然后是22等）。

2 个答案:

答案 0 :(得分：1)

我给你一个基本的想法：剩下的如果留下作为老师说的练习：

<script type="text/javascript">
 var last_inserted = 0;

 function insert_div(){
     $d = $("#div_" + last_inserted).clone();
     $d.attr('id', 'div_' + last_inserted++);
     $("table").append($d);
 }
</script>

还有别的：<a onclick="javascript:insert_div()">可能不正确（未经测试）。

：<a onclick="insert_div()">或<a href="javascript:insert_div()">

答案 1 :(得分：1)

这纯粹是执行此任务的另一种方式的教学示例。故意提供想法。

建议：使用jQuery时避免使用基于属性的事件处理程序：

澄清我的第一条评论。如果使用onclick=javascript处理程序，则将事件的注册放在HTML中，与脚本中的实际处理程序分开。 “jQuery方式”是将处理函数应用于选择的元素，使用.click()之类的方法和我在下面使用的相当有用的.on()。这样可以更轻松地维护页面，因为您没有浏览HTML for JavaScript代码段。 jQuery事件处理程序还支持为同一事件提供多个处理程序，这些处理程序附加到您无法使用onclick= 执行的元素。

显示的概念：

  • 使用全局计数器作为下一个ID号，并在每次使用后将其递增
  • 使用委托事件处理程序处理“添加”点击，因为动态添加了元素（所以直到稍后才存在）。
  • 使用存储在虚拟<script>块中的模板来保存您的模板HTML（此text/template类型未知，因此被所有浏览器忽略。它还使维护变得轻而易举。
  • 使用新的ID信息替换模板中的占位符标记
  • 使用$(html)
    • 将HTML转换为DOM元素
  • 在新行中查找后代，以添加mask。
    • 等内容
  • 附加新行

JSFiddle： http://jsfiddle.net/TrueBlueAussie/Lu0q0na2/2/ 

// Declare a global counter for our new IDs
id = 2;

// Listen for click events at a non-changing ancestor element (delegated event handler)
$(document).on('click', '.addnew', function(e){

    // get the HTML of the template from the dummy script block
    var template = $('#template').html();

    // Change the template names etc based on the new id
    template = template.replace('{name}', 'name' + id).replace('{id}', id);

    // Increase next id to use
    id++;

    // Convert the HTML into a DOM tree (so we can search it easily)
    var $template= $(template);

    // Apply the mask to the newly added input - alter this to suit
    $template.find('input').mask("99/99/9999");

    // Append the new row
    $('table').append($template);

    // stop the link from moving to page top
    return false;
});

如果您有任何疑问，我将很乐意解释其中的任何部分。我意识到与你现有的做法相比，这可能会有点震撼：）

相关问题
最新问题