本文实例讲述了 jQuery+ajax 实现动态添加表格 tr td 功能. 分享给大家供大家参考, 具体如下:
功能: ajax 获取后台返回数据给 table 动态添加 tr/td
html 部分:
<table>
<tbody></tbody>
</table>
ajax 部分:
- var year = $('#year').val();// 下拉框数据
- var province= $('#province').val();// 下拉框数据
- $('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'>暂无数据</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 后台(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;
- }
更多关于 jQuery 相关内容感兴趣的读者可查看本站专题:jQuery 表格 (table) 操作技巧汇总,jQuery 操作 json 数据技巧汇总,jQuery form 操作技巧汇总,jQuery 常用插件及用法总结,jQuery 扩展技巧总结及jquery 选择器用法总结
来源: http://www.jb51.net/article/138782.htm