數據新增--》id和name到對象----》dom渲染

時間 2019-11-17
標籤數據新增對象 dom 渲染欄目 HTML 简体版
原文原文鏈接
<html>
	 <head>
		
		 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
		 <link rel="stylesheet" href="http://www.reoonet.com/plug/bootstrap-sweetalert/lib/sweet-alert.css">
	 </head>
	 <body>
		 
		 
		 
		 <div class="container">
			 <div class="row">
				 <div class="col-md-6">列表</div>
				 <div class="col-md-6 text-right">
					 <a href="" class="btn btn-success"  data-toggle="modal" data-target="#modal-add">新增</a>
				 </div>
			 </div>
			 <table class="table table-hover table-condensed">
			 <thead>
			 	<tr>
			 		<th width="90%">分組名稱</th>
			 		<th width="10%">操做</th>
			 	</tr>
			 </thead>
			 <tbody id="storeGroup-tbody">
			 
			 </tbody>
			 </table>
		 </div>
		 
	 	
	 </body>
 </html>


<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://www.reoonet.com/plug/bootstrap-sweetalert/lib/sweet-alert.min.js"></script>




<!--模態框-新增分組-->
<div class="modal fade" id="modal-add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">新增分組</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                       
                        <input type="text" class="form-control"  id="groupName" name="groupName">
                      
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary btn-submit">確認</button>
            </div>
        </div>
    </div>
</div>
<!--模態框-新增分組-->


<script>
    $(function () {

         //獲取
        var GroupID = 0;                                          //id初始化必定要在點擊外面；
        $("#modal-add .btn-submit").click(function(){
            var this_groupName_val = $("#groupName").val();
            if(this_groupName_val !==""){

                //數據存儲
                var data_group ={};
                data_group.GroupTitle=this_groupName_val;
                GroupID++;                                      //id累加必定要在裏面
                data_group.GroupID="Group"+GroupID;
                console.log(data_group);

                $("#groupName").val("");
                $('#modal-add').modal('hide');

                //渲染dom
                this_tr ='<tr>'+
                    '<td data-id='+data_group.GroupID+'>'+         //讀出了id
                     data_group.GroupTitle+                        //讀出了標題
                    '</td>'+
                    '<td>'+
                    '<div class="btn-group">'+
                    '<a class="btn btn-success  dropdown-toggle" href="javascript:;" data-toggle="dropdown">'+
                    '<i class="glyphicon glyphicon-chevron-down"></i>'+
                    '</a>'+
                    '<ul class="dropdown-menu pull-right">'+
                    '<li>'+
                    '<a href="javascript:;">查看</a>'+
                    '</li>'+
                    '<li>'+
                    '<a href="javascript:;" data="edit" data-toggle="modal" data-target="#modal-edit">編輯</a>'+
                    '</li>'+
                    '<li>'+
                    '<a href="javascript:;" data="del">刪除</a>'+
                    '</li>'+
                    '<li class="divider"> </li>'+
                    '<li>'+
                    '<a href="javascript:;" data="copy"  data-toggle="modal" data-target="#modal-copy">複製價格</a>'+
                    '</li>'+
                    '</ul>'+
                    '</div>'+
                    '</td>'+
                    '</tr>';
                $("#storeGroup-tbody").append(this_tr);
            }
            else{
                swal({
                        title: "不得爲空!",
                        type: "warning",
                        showCancelButton:true,
                        confirmButtonText: '確認',
                        cancelButtonText:"取消"
                    })
            }
        });



    })
</script>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。