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


画好样式,动态添加数据


<!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>



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值