Home > Web Front-end > JS Tutorial > Detailed explanation of jQuery+ajax dynamic operation table tr td steps

Detailed explanation of jQuery+ajax dynamic operation table tr td steps

php中世界最好的语言
Release: 2018-04-27 10:40:32
Original
2014 people have browsed it

This time I will bring you jQuery ajax dynamic operation table tr td steps detailed explanation, what are the precautions of jQuery ajax dynamic operation 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:

detailed explanation of vue-cli2.9.3 usage steps

detailed explanation of vue webpack use cases

The above is the detailed content of Detailed explanation of jQuery+ajax dynamic operation table tr td steps. 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