table动态添加

最新推荐文章于 2023-10-31 11:22:54 发布

子杣

最新推荐文章于 2023-10-31 11:22:54 发布

阅读量359

点赞数

文章标签： html5 html css jquery

本文链接：https://blog.csdn.net/qq_41749069/article/details/120158617

版权

<html>

   <head>
       <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
       <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
       <style>

           table.default-table{
   /* -moz-border-radius: 5px;
   -webkit-border-radius:5px;
   border-radius:5px; */
   width: 100%;
   border:solid #333;
   border-width:1px 0px 0px 1px;
   font-size: #333;
   border-collapse: collapse;
   border-spacing: 0;
}
table.default-table tbody tr{
   height: 20px;
   line-height: 20px;
}
table.default-table tbody tr.odd{
   background-color: #fff;
}
table.default-table tbody tr.even{
   background-color: #F5F5F5;
}
table.default-table tbody tr:hover{
   background-color: #eee;
}
table.default-table tbody tr th,table.default-table tbody tr td{
   padding:3px 5px;
   text-align: left;
   /* border: 1px solid #ddd; */
   border:solid #333;
   border-width:0px 1px 1px 0px;
}
table.default-table tbody tr th{
   font-weight: bold;
   text-align: center;
}

table.default-table tbody tr td.tac{
   text-align: center;
}
table.default-table tbody tr td a:hover{
   color:#0080c0;
}
input[name]{
   width:100%;
   height:100%;

}
       </style>
   </head>
   <body>
   <form action="123" method="get">
       <table class="default-table" id = "test">
           <thead>
               <tr style="border-bottom:1px solid black;">
                       <th>名称</th>
                       <th>类型</th>
                       <th>长度</th>
                       <th>小数点</th>
                       <th>不是null</th>
                       <th>虚拟</th>
                       <th>主键</th>
                       <th>注释</th>
                       <th>操作</th>
               </tr>
           </thead>

           <tbody>
               <tr>
                       <td><input type="text" name="one"></td>
                       <td class="tac"><input type="text" name="two"></td>
                       <td class="tac"><input type="text" name="two"></td>
                       <td class="tac"><input type="text" name="two"></td>
                       <td class="tac"><input type="text" name="two"></td>
                       <td class="tac"><input type="text" name="two"></td>
                       <td class="tac"><input type="text" name="two"></td>
                       <td class="tac"><input type="text" name="two"></td>
                       <td class="tac"><a href="#" οnclick="delete_this(this)">删除</a></td>
               </tr>
           </tbody>
       </table>
       
       <input type="submit" value="提交">
   </form>
       <input type="button" id="btn2" value="增加新数据">

   </body>
   <script>
   function delete_this(temp){
   $(temp).parent().parent().remove(); //必须保证已经引入了jQuery，此处$(temp)先获取到<a>对象，.parent()拿到<td>，再.parent()获取到tr
   }
   $(function(){
   $("#btn2").click(function() {
       $("#test tbody").append('<tr><td><input type="text" name="one"></td><td class="tac"><input type="text" name="two"></td><td class="tac"><input type="text" name="two"></td><td class="tac"><input type="text" name="two"></td><td class="tac"><input type="text" name="two"></td><td class="tac"><input type="text" name="two"></td><td class="tac"><input type="text" name="two"></td><td class="tac"><input type="text" name="two"></td><td class="tac"><a href="#" οnclick="delete_this(this)">删除</a></td></tr>');
   });
});

           //获取table内容并转成二维数组（支持colspan和rowspan）
   function getTabArray(tabId) {
       var data = [];
       if ($(tabId + ' tr').length == 0) {
           return data;
       }
       //填充数组
       $(tabId + ' tr').each(function () {
           var arr = [];
           $(this).children('th,td').each(function () {
               arr.push($(this).text().trim());
               if ($(this).attr('colspan')) {
                   for (var i = 0, len = parseInt($(this).attr('colspan')) - 1; i < len; i++) {
                       arr.push('');
                   }
               }
           });
           data.push(arr);
       });
       //二次填充
       var yIndex = 0;
       $(tabId + ' tr').each(function () {
           var xIndex = 0;
           $(this).children('th,td').each(function () {
               var t_yIndex = 0;
               if ($(this).attr('rowspan')) {
                   t_yIndex = parseInt($(this).attr('rowspan'));
               }

               for (var i = 1, len = t_yIndex; i < len; i++) {
                   var arr = data[yIndex + i];
                   arr.splice(xIndex, 0, '');
               }

               if ($(this).attr('colspan')) {
                   xIndex += parseInt($(this).attr('colspan'));
               } else {
                   xIndex++;
               }
           });
           yIndex++;
       });
       return data;
   }

   //测试调用显示到console
   getCvsData()
   function getCvsData() {
       var data = getTabArray('#test');
       var cvsLines = '';
       for (var i = 0, len = data.length; i < len; i++) {
           cvsLines += data[i].join(',') + '\n';
       }

       //debug
       for (var i = 0, len = data.length; i < len; i++) {
           console.info(data[i].join(','));
       }

       console.info(data)
       return cvsLines;
   }
   </script>
</html>

子杣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
table动态添加

<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> table.defaul...
复制链接

扫一扫