Jquery ajax动态添加两个并列列表

大概是这样

序号数值序号数值
1张珊2张三
3张珊4张三
5张珊6张三

//查询数据

function selectNewData(){
    $.ajax({
        type: "POST",//方法类型
        dataType: "json",//预期服务器返回的数据类型
        url: "form/selectNewData.action" ,//url
        async: false,
        success: function (data) {
            var str="";
            for (var i = 0; i <data.length; i++) {

		 
              if(i%2==1){
                    var createTr= $(str+'<td style="color: #7992a8;font-size: 13px;">' + (i+1) + '</td>' +
                    '<td style="color: #7992a8;font-size: 13px;">' + data[i].deviceName + '</td>' +
                    '<td style="color: #7992a8;font-size: 13px;">' + data[i].color + '</td></tr>');
                    $('#body').append(createTr);
                    str="";
                }else if(i%2!=1){
                    str = '<tr style="color: #7992a8;text-align: center;font-size: 13px;"><td style="color: #7992a8">' + (i+1) + '</td>' +
                        '<td style="color: #7992a8;font-size: 13px;">' + data[i].deviceName + '</td>' +
                        '<td style="color: #7992a8;font-size: 13px;">' + data[i].color + '</td>' ;

                } else if(data.length%2!=1&&i!=data.length){
                    //如果数据的长度是奇数 最后一个直接插入
                    createTr = $('<tr style="color: #7992a8;text-align: center;font-size: 13px;"><td style="color: #7992a8">' + (i+1) + '</td>' +
                        '<td style="color: #7992a8;font-size: 13px;">' + data[i].deviceName + '</td>' +
                        '<td style="color: #7992a8;font-size: 13px;">' + data[i].color + '</td></tr>' );
                }

            }
        },
    });

}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的示例,用于使用jQueryAjax动态筛选条件。 HTML代码: ```html <form> <label for="category">选择分类:</label> <select id="category" name="category"> <option value="">全部</option> <option value="food">食品</option> <option value="clothing">服装</option> <option value="electronics">电子产品</option> </select> <br><br> <label for="price">选择价格范围:</label> <select id="price" name="price"> <option value="">全部</option> <option value="0-50">0-50元</option> <option value="50-100">50-100元</option> <option value="100-200">100-200元</option> <option value="200+">200元以上</option> </select> </form> <div id="result"></div> ``` JavaScript代码: ```javascript $(document).ready(function() { // 当选择框改变时,触发Ajax请求 $('#category, #price').change(function() { var category = $('#category').val(); var price = $('#price').val(); // 发送Ajax请求 $.ajax({ url: 'filter.php', // 请求的URL type: 'GET', // 请求方式 data: { category: category, price: price }, success: function(response) { // 在页面上显示结果 $('#result').html(response); }, error: function(xhr, status, error) { // 处理错误 alert('发生错误:' + error); } }); }); }); ``` PHP代码(filter.php): ```php <?php // 获取筛选条件 $category = $_GET['category']; $price = $_GET['price']; // 根据条件查询数据库 // ... // 返回结果 echo '查询结果:...'; ?> ``` 这个示例中,当用户选择分类或价格范围时,会触发Ajax请求,发送选择的条件到服务器端的filter.php文件。在filter.php文件中,可以根据条件查询数据库,并返回结果。在JavaScript中,使用success回调函数来在页面上显示结果,使用error回调函数来处理错误。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值