JavaScript動態向表格新增資料
<script>
$(document).ready(function() {
$("#search-form").submit(function(event) {
//stop submit the form, we will post it manually.
event.preventDefault();
fire_ajax_submit();
});
});
function fire_ajax_submit() {
/* $("#btn-search").attr("disabled","true"); */
var search = JSON.stringify({
/* KeyWord : $("#KeyWord").val(), */
/* Page : 3 */
});
$.ajax({
type : "GET",
/* contentType : "application/json",//傳送資料為json格式 */
url : "/resume/queryList",
/* data : search, */
dataType : 'json',
cache : false,
timeout : 600000,
success : function(data) {
/* console.log("SUCCESS : ", data); */
for(var index in data){
var gender=data[index].gender;
var age=data[index].age;
var education_bachelor=data[index].education_bachelor;
var year_experience=data[index].year_experience;
var web_id=data[index].web_id;
var url=data[index].url;
var work=data[index].work;
var update_time=data[index].update_time;
var resume_from=data[index].resume_from;
var location=data[index].location;
var blank="_blank";
var html="<tr>";
html+="<th>"+gender+"</th>";
html+="<th>"+age+"</th>";
html+="<th>"+education_bachelor+"</th>";
html+="<th>"+work+"</th>";
html+="<th>"+year_experience+"</th>";
html+="<th>"+web_id+"</th>";
html+="<th>"+resume_from+"</th>";
html+="<th>"+update_time+"</th>";
html+="<td><a href="+location+" target="+blank+">檢視簡歷</a></td>";
html+="</tr>"
$('#mytab').append(html);
}
/* var json = "<h4>Ajax Response</h4><pre>"
+ JSON.stringify(data, null, 5) +
"</pre>";
$('#feedback').html(json); 在頁面上列印獲取到的json */
},
error : function(e) {
var json = "<h4>Ajax Response</h4><pre>" + e.responseText
+ "</pre>";
$('#feedback').html(json);
console.log("ERROR : ", e);
}
});
}
$("#btn-search").removeAttr("disabled");
以下是表格,表格樣式是bootstrop
$(document).ready(function() {
$("#search-form").submit(function(event) {
//stop submit the form, we will post it manually.
event.preventDefault();
fire_ajax_submit();
});
});
function fire_ajax_submit() {
/* $("#btn-search").attr("disabled","true"); */
var search = JSON.stringify({
/* KeyWord : $("#KeyWord").val(), */
/* Page : 3 */
});
$.ajax({
type : "GET",
/* contentType : "application/json",//傳送資料為json格式 */
url : "/resume/queryList",
/* data : search, */
dataType : 'json',
cache : false,
timeout : 600000,
success : function(data) {
/* console.log("SUCCESS : ", data); */
for(var index in data){
var gender=data[index].gender;
var age=data[index].age;
var education_bachelor=data[index].education_bachelor;
var year_experience=data[index].year_experience;
var web_id=data[index].web_id;
var url=data[index].url;
var work=data[index].work;
var update_time=data[index].update_time;
var resume_from=data[index].resume_from;
var location=data[index].location;
var blank="_blank";
var html="<tr>";
html+="<th>"+gender+"</th>";
html+="<th>"+age+"</th>";
html+="<th>"+education_bachelor+"</th>";
html+="<th>"+work+"</th>";
html+="<th>"+year_experience+"</th>";
html+="<th>"+web_id+"</th>";
html+="<th>"+resume_from+"</th>";
html+="<th>"+update_time+"</th>";
html+="<td><a href="+location+" target="+blank+">檢視簡歷</a></td>";
html+="</tr>"
$('#mytab').append(html);
}
/* var json = "<h4>Ajax Response</h4><pre>"
+ JSON.stringify(data, null, 5) +
"</pre>";
$('#feedback').html(json); 在頁面上列印獲取到的json */
},
error : function(e) {
var json = "<h4>Ajax Response</h4><pre>" + e.responseText
+ "</pre>";
$('#feedback').html(json);
console.log("ERROR : ", e);
}
});
}
$("#btn-search").removeAttr("disabled");
以下是表格,表格樣式是bootstrop
<table class="table table-hover" id="mytab">
<tr align="center">
<th>性別</th>
<th>年齡</th>
<th>教育經歷</th>
<th>工作經歷</th>
<th>工作年限</th>
<th>WEB_ID</th>
<th>來自哪裡</th>
<th>更新時間</th>
<td>下載</td>
</tr>
</table>
相關文章
- javascript 動態新增表格行JavaScript
- javascript動態建立table表格並新增資料程式碼JavaScript
- JavaScript動態為table表格新增行JavaScript
- javascript動態刪除和新增表格行程式碼例項JavaScript行程
- JavaScript 動態建立table表格JavaScript
- JavaScript動態建立table表格JavaScript
- javascript實現的動態新增和刪除表格行程式碼JavaScript行程
- javascript動態刪除或者新增table表格行程式碼例項JavaScript行程
- JavaScript動態建立表格和增加表格的行JavaScript
- jQuery動態新增和刪除表格行jQuery
- JavaScript動態新增li元素JavaScript
- JSP頁面動態生成表格併為表格新增事件JS事件
- jQuery動態新增和刪除表格記錄jQuery
- layui動態新增刪除表格,並獲取表格中的值UI
- javascript動態建立table表格程式碼示例JavaScript
- elementui表格動態資料單元格合併UI
- javascript動態操作table表格程式碼例項JavaScript
- JavaScript 動態新增與刪除元素JavaScript
- JavaScript動態新增或者刪除HTML元素JavaScriptHTML
- JavaScript動態建立div並新增樣式JavaScript
- JavaScript動態新增和刪除div元素JavaScript
- javascript如何動態新增和刪除元素JavaScript
- 動態建立表格
- Python SqlAlchemy動態新增資料表欄位PythonSQL
- JavaScript動態新增checkbox核取方塊JavaScript
- JavaScript 動態建立div併為其新增文字JavaScript
- 使用JavaScript動態新增CSS樣式規則JavaScriptCSS
- js動態新增和刪除table表格行程式碼例項JS行程
- VOL表格動態新增操作按鈕及彈窗確認方法
- 利用CSOM向列表新增資料夾
- JavaScript狀態資料JavaScript
- javascript如何動態刪除或者新增物件屬性JavaScript物件
- JavaScript table表格行進行刪除和新增JavaScript
- 半自動化運維之動態新增資料檔案(一)運維
- 半自動化運維之動態新增資料檔案(二)運維
- javascript動態設定table表格的cellpadding和cellspacingJavaScriptpadding
- javascript動態建立指定行與列table表格程式碼例項JavaScript
- jquery 動態表格合併jQuery