Home > Web Front-end > JS Tutorial > How to implement jQuery+ajax to dynamically add table tr td

How to implement jQuery+ajax to dynamically add table tr td

php中世界最好的语言
Release: 2018-06-02 11:22:02
Original
2127 people have browsed it

This time I will show you how to implement jQuery ajax dynamically add table tr td, what are the precautions to implement jQuery ajax dynamically add table tr td , the following is a practical case, let’s take a look.

Function: ajax gets the background return data and dynamically adds tr/td to the table

html part:

<table>
<tbody></tbody>
</table>
Copy after login

ajax part:

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=&#39;2&#39;>暂无数据</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);
});
}
}
})
Copy after login

php background (thinkPHP processing):

$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;
}
Copy after login

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website!

Recommended reading:

How to use react with antd components to implement a management system

Summary of js image conversion to base64 method

The above is the detailed content of How to implement jQuery+ajax to dynamically add table tr td. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template