jquery ajax 可增加表格,jQuery+ajax实现动态添加表格tr td功能示例

本文展示了如何利用jQuery和Ajax从后台获取数据,并动态插入到HTML表格中。通过监听下拉框的选择,发送GET请求到服务器,根据返回的JSON数据更新表格内容。当没有数据时,会在表格中显示'暂无数据'。该示例使用了ThinkPHP框架处理后台请求。
摘要由CSDN通过智能技术生成

本文实例讲述了jquery+ajax实现动态添加表格tr td功能。分享给大家供大家参考,具体如下:

功能:ajax获取后台返回数据给table动态添加tr/td

html部分:

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('

暂无数据');break;

case '1':

$.each(data.data,function(i,n){

var $tr = $("

"+

"

"+n.year+""+

"

"+n.province+""+

"

");

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程序设计有所帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery是一个JavaScript库,可以用它来方便地操作HTML元素。以下是一个简单的示例,演示如何使用JQuery实现网页表格动态增加和删除内容。 首先,我们需要在HTML文件中引入JQuery库: ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> ``` 然后,我们可以在HTML文件中创建一个空的表格,并为其添加一个按钮,用于动态增加表格行: ```html <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> </tbody> </table> <button id="addRowBtn">Add Row</button> ``` 接下来,我们可以使用以下JQuery代码来实现动态增加表格行的功能: ```javascript $(document).ready(function() { // 给按钮添加点击事件 $('#addRowBtn').click(function() { // 创建一个新的表格行 var newRow = $('<tr>'); // 创建三个新的表格单元格,并为其添加数据 var nameCell = $('<td>').text('New Name'); var ageCell = $('<td>').text('New Age'); var genderCell = $('<td>').text('New Gender'); // 将这些单元格添加到新的表格行中 newRow.append(nameCell); newRow.append(ageCell); newRow.append(genderCell); // 将新的表格添加表格的tbody中 $('#myTable tbody').append(newRow); }); }); ``` 以上代码中,我们首先使用`$(document).ready()`来确保页面加载完毕后再执行代码。然后,我们给按钮添加了一个点击事件,当用户点击按钮时,我们会创建一个新的表格行,并向其中添加三个单元格,然后将新的表格添加表格的tbody中。 接下来,我们可以使用以下JQuery代码来实现动态删除表格行的功能: ```javascript $(document).ready(function() { // 给表格添加点击事件 $('#myTable tbody').on('click', 'tr', function() { // 移除被点击的表格行 $(this).remove(); }); }); ``` 以上代码中,我们使用了JQuery的`on()`方法来为表格的tbody中的所有表格添加一个点击事件。当用户点击任何一个表格行时,我们会将该表格行从DOM中移除。 综上所述,以上代码演示了如何使用JQuery实现网页表格动态增加和删除内容的功能
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值