//點選追加觸發
$(function(){
$("#button").click(function(){
var div_ = $("#sel").val();
var context = $("#context").val();
append(div_,context);
//$("#tab tr:not(:first)").remove();
//$("#tab tbody").empty();
$("#tab tbody").remove();
query();
});
//點選查詢全部觸發
$("#but").click(function(){
//點選模糊查詢觸發
$("#query").click(function(){
alert("您輸入的内容為："+context);
$("#tab tr:not(:first)").empty();
//$("table tbody").remove();
queryByContext();
//删除事件
function del(id){
var url = "testController/delModel";
$.ajax({
type: 'POST',
url: url,
data:{id: id},
dataType: 'json',
success: function(data){
alert("資料庫删除成功");
$("#tab tr:not(:first)").empty();
}});
};
//編輯事件
function upd(id){
var url = "";
alert("資料庫編輯成功");
}
//添加方法
function append(div_,context){
$("#"+div_).append("<tr><td>"+ div_ +"</td>"+"<td>"+context+"</td></tr>");
$.get("testController/addModel",{div_id: div_, context: context }).done(function( data ) {
alert("添加到資料庫成功");
};
//模糊查詢方法
function queryByContext(){
var url = "testController/queryAllDataByContext";
data:{context:$("#context").val()},
alert("資料庫查詢成功");
console.log(data);
for(var i=0;i<data.length;i++){
var id = data[i].id;
var divId = data[i].divId;
var context = data[i].context;
var dtt = data[i].dtt;
//alert(id);
$("#tab thead").append("<tr><td>"+id+"</td>"+"<td>"+divId+"</td>"+"<td>"+context+"</td>"+"<td>"+dtt+"</td>"+"<td><a class='del'onclick='del("+id+")'>删除</a></td></tr>");
},
error:function(){
alert("資料庫查詢失敗");
//查詢全部方法
function query(){
var url = "testController/queryAllData";
alert("查詢成功");
// $("#tab tbody").remove();
$("#tab").append("<tr><td>"+id+"</td>"+"<td>"+divId+"</td>"+"<td>"+context+"</td>"+"<td>"+dtt+"</td>"+"<td><button onclick='del("+id+")'>删除</button></td>"+"<td><button onclick='upd("+id+")'>編輯</button></td></tr>");
alert("查詢失敗");
</script>
</head>
<body>
DIV名：<select id="sel">
<option value="div1">div1</option>
<option value="div2">div2</option>
<option value="div3">div3</option>
</select><br />
DIV值：<input type="text" id="context"/><br />
<input type="button" id="button" value="添加資料"/>
<input type="button" id="but" value="查詢全部"/>
<input type="button" id="query" value="模糊查詢"/>
<h1>div1資料如下</h1>
<div >
<table border="1" width="350" id="t">
<thead class="head" id="div1">
<tr>
<td>DIV名稱</td>
<td>DIV值</td>
</tr>
</thead>
</table>
</div>
<h1>div2資料如下</h1>
<thead class="head" id="div2">
<h1>div3資料如下</h1>
<thead class="head" id="div3">
<h1>資料庫的表資料</h1>
<table border="1" width="350" id="tab">
<thead>
<td>字段ID</td>
<td>字段DIV_ID</td>
<td>字段CONTEXT</td>
<td>字段DTT</td>
<td>是否删除</td>
<td>是否編輯</td>
<tbody></tbody>
![vue搭建過程及出現問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)