js动态创建li-动态创建td

最新推荐文章于 2022-11-08 11:40:18 发布

九宝妈咪

最新推荐文章于 2022-11-08 11:40:18 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： js jquery

本文链接：https://blog.csdn.net/elisunli/article/details/60142708

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

画好样式，动态添加数据

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf8"/>

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>


<script>
 
$(document).ready(function(){

  
  m1();
  m2();
});

function m1(){
 //$("ul").children().css({"color":"red","border":"2px solid red"});
  //var params =  $("#main123").children();

  var liFirst = $('#main123 li:first');//$("ul li:eq(0)"); 获取第一个li
  
  // 克隆第一个li 作为末模板，然后清空ul子元素
  var liObj = liFirst.clone(true);
  $('#main123').empty();


   for(var i=0;i<3;i++) {
      var liClone = liObj.clone(true);// 必须克隆否则就一个对象移动
      var liCloneChild = liClone.children();
      liClone.empty();
      //$("ul").append(liClone);
      var myli = liClone.appendTo($("#main123"));// 创建li对象，追加到ul里面

      // 循环li里面的子元素，分别改变内容并追加到ul里
      $.each(liCloneChild,function(index,obj){
          
          var dd = $(obj);// 创建子元素
          dd.text(i+"测试"+index);//改变子元素内容值
          dd.appendTo(myli);//把子元素追加到ul
      });


      //$("ul").append('<li>'+str+'</li>');
   }

}


function m2() {
  var trFirst = $('#main1488253043200003 tbody tr:first');// 获取第一个tr
  // 克隆第一个tr 作为末模板，然后清空tbody子元素
  var trObj = trFirst.clone(true);
  $('#main1488253043200003 tbody').empty();

   for(var i=0;i<3;i++) {
      var trClone = trObj.clone(true);// 必须克隆否则就一个对象移动
      var trCloneChild = trClone.children();
      trClone.empty();
      var mytr = trClone.appendTo($("#main1488253043200003 tbody"));// 创建tr对象，追加到tbody里面

      // 循环tr里面的子元素，分别改变内容并追加到tbody里
      $.each(trCloneChild,function(index,obj){
          
          var dd = $(obj);// 创建子元素
          dd.text(i+"测试"+index);//改变子元素内容值
          dd.appendTo(mytr);//把子元素追加到tbody
      });
      //$("table").append('<tr>'+str+'</tr>');
   }
}



</script>
</head>
<body>

<div style="width:300px;">div (当前元素) 
  <ul id="main123">
    <li>
      <span style="color:red;float:left;">1.孙</span>
      <span style="color:green;float:right;">1000</span>
    </li>
   
  </ul>
  <div id="aaa"></div>
</div>

<div>
    talbe
    <table id="main1488253043200003" style="width: 200px;height:100px;border: 1px solid rgba(255, 255, 0, 0.5);border-collapse:collapse;padding: 0;">
               <thead>
                    <tr style="background-color:rgba(255, 255, 255, 0.1);vertical-align:middle;color:#33b5e5">
                          <th>列一</th><th>列二</th><th>列三</th>
                   </tr>
               </thead>
               <tbody>
                    <tr>
                          <td style="color:red;">张三</td><td style="color:green;">20</td><td style="color:yellow;">30</td>
                    </tr>
                    
               </tbody>
    </table>
</div>
</body>
</html>