jQuery+ajax實(shí)現(xiàn)動(dòng)態(tài)添加表格tr td功能示例
本文實(shí)例講述了jQuery+ajax實(shí)現(xiàn)動(dòng)態(tài)添加表格tr td功能。分享給大家供大家參考,具體如下:
功能:ajax獲取后臺(tái)返回?cái)?shù)據(jù)給table動(dòng)態(tài)添加tr/td
html部分:
<table> <tbody></tbody> </table>
ajax部分:
var year = $('#year').val();//下拉框數(shù)據(jù)
var province= $('#province').val();//下拉框數(shù)據(jù)
$('table tbody').html('');
$.ajax({
url:"/Plan/sendJson.html",
type:"get",
data:{
'year':year,
'province':province
},
datatype:'json',
success:function(data){
switch(data.msg)
{
case '0':
$('table tbody').prepend('<tr><td colspan='2'>暫無(wú)數(shù)據(jù)</td></tr>');break;
case '1':
$.each(data.data,function(i,n){
var $tr = $("<tr>"+
"<td>"+n.year+"</td>"+
"<td>"+n.province+"</td>"+
"</tr>");
var $table = $('table tbody');
$table.append($tr);
});
}
}
})
php后臺(tái)(thinkPHP處理):
$year = I('get.year');
$province = I('get.province');
$condition = array();
$year && $condition = array('eq',$year);
$province && $condition = array('eq',$province);
$dataList = M('Plan')->where($condition)->select();
if(false != $dataList){
$data['msg'] = '1';
$data['data'] = $dataList;
echo json_encode($data);
exit;
}else{
$data['msg'] = '0';
$data['data'] = '';
echo json_encode($data);
exit;
}
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery表格(table)操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- Jquery ajax請(qǐng)求導(dǎo)出Excel表格的實(shí)現(xiàn)代碼
- JQuery Ajax動(dòng)態(tài)生成Table表格
- jquery通過AJAX從后臺(tái)獲取信息并顯示在表格上的實(shí)現(xiàn)類
- bootstrap jquery dataTable 異步ajax刷新表格數(shù)據(jù)的實(shí)現(xiàn)方法
- 用Jquery實(shí)現(xiàn)可編輯表格并用AJAX提交到服務(wù)器修改數(shù)據(jù)
- JQuery通過AJAX從后臺(tái)獲取信息顯示在表格上并支持行選中
- jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
- JQuery DataTable刪除行后的頁(yè)面更新利用Ajax解決
- jQuery DataTables插件自定義Ajax分頁(yè)實(shí)例解析
- jQuery ajax動(dòng)態(tài)生成table功能示例
相關(guān)文章
jQuery中hover與mouseover和mouseout的區(qū)別分析
這篇文章主要介紹了jQuery中hover與mouseover和mouseout的區(qū)別,結(jié)合實(shí)例分析了jQuery中hover與mouseover和mouseout的區(qū)別與使用技巧,需要的朋友可以參考下2015-12-12
Jquery 獲取表單text,areatext,radio,checkbox,select值的代碼
Jquery 獲取表單text,areatext,radio,checkbox,select值的實(shí)現(xiàn)代碼,學(xué)習(xí)jquery的朋友可以參考下。都是必須要了解的。2009-11-11
javascript截圖 jQuery插件imgAreaSelect使用詳解
這篇文章主要介紹了avascript截圖 jQuery插件imgAreaSelect使用詳解,需要的朋友可以參考下2016-05-05
jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示離開隱藏效果
本文為大家介紹下使用jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示,離開就隱藏的效果,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07
基于jQuery的讓textarea支持Ctrl+Z步步撤銷功能
基于jQuery的讓textarea支持Ctrl+Z步步撤銷功能,需要的朋友可以參考下。2011-10-10
jquery實(shí)現(xiàn)彈出窗口效果的實(shí)例代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)彈出窗口效果的實(shí)例代碼。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11
jQuery中outerWidth()方法用法實(shí)例
這篇文章主要介紹了jQuery中outerWidth()方法用法,實(shí)例分析了outerWidth()方法的功能、定義及獲取第一個(gè)匹配元素外部寬度的使用技巧,需要的朋友可以參考下2015-01-01
jQuery滑動(dòng)到底部加載下一頁(yè)數(shù)據(jù)的實(shí)例代碼
這篇文章主要介紹了jQuery滑動(dòng)到底部加載下一頁(yè)數(shù)據(jù)的實(shí)例代碼,需要的朋友可以參考下2017-05-05
拉動(dòng)滾動(dòng)條加載數(shù)據(jù)的jquery代碼
拉動(dòng)滾動(dòng)條加載數(shù)據(jù)的jquery代碼,需要的朋友可以參考下2012-05-05
jQuery內(nèi)容折疊效果插件用法實(shí)例分析(附demo源碼)
這篇文章主要介紹了jQuery內(nèi)容折疊效果插件用法,結(jié)合實(shí)例形式分析了jQuery展開折疊插件jquery.coolfieldset.js的具體使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04

