Question

如果可能的话，我试图在“if”语句中组合2个条件。

我想首先检查屏幕宽度，然后查看表格的行或第一行是否有超过2个td。如果有一些功能。

这是我作为宽度的第一部分，但我将如何添加需要满足的其他条件？

var width = parseInt($(window).width());
if (width<=610) {  
//Need to add the other condition that is a table has more than 2 td's in a row

}

这是我想要运行的真实代码。如果超过2列，请参阅我的评论。

var width = parseInt($(window).width());
if (width<=610) {   

    //Need to figure out how execute this if there are more than 2 columns in the table???
    $('.content table').replaceWith(function() {

    var $th = $(this).find('th'); // get headers
    var th = $th.map(function() {
        return $(this).text();
    }).get(); // and their values

    $th.closest('tr').remove(); // then remove them

    var $d = $('<div>', { 'class': 'responsive-table' });

    $('tr', this).each(function(i, el) {
        var $div = $('<div>', {'class': 'box grey-bg'}).appendTo($d);
        $('td', this).each(function(j, el) {
            var n = j + 1;
            var $row = $('<div>', {
                //'class': 'row-' + n
                'class': 'row'
            });
            $row.append(
            $('<span>', {
                //'class': 'label-' + n,
                'class': 'label',
                text: th[j]
            }), ' : ', $('<span>', {
                //'class': 'data-' + n,
                'class': 'data',
                text: $(this).text()
            })).appendTo($div);
        });
    });
    return $d;  
    }); 

};

Answer 1

请尝试以下内容，假设您只想获取表格的数量。

var width = parseInt($(window).width());
var tableColCount = $('#tableID tr:first').find('td').length;

if (width<=610 && tableColCount  > 2) {  
  //Your code

}

Answer 2

function checkResult() {
    $("#IDOfYourTable tr").each(function() {
        if ((($this).find("td").size() > 1) || (($this).find("th").size() > 1))
            return true;
    });
    return false;
}

在if子句中使用此功能。

更正后的代码：

var width = parseInt($(window).width());
var that = undefined;
function checkResult() {
    if (width <= 610) {
        $(".content table tr").each(function() {
            if (($(this).find("td").size() > 2) || ($(this).find("th").size() > 2))
            {
                if ((that == undefined) || (that[0] != this)) {
                that = $(this);
    var $th = $(this).find('th'); // get headers
    var th = $th.map(function() {
        return $(this).text();
    }).get(); // and their values

    $th.closest('tr').remove(); // then remove them

    var $d = $('<div>', { 'class': 'responsive-table' });

    $('tr', this).each(function(i, el) {
        var $div = $('<div>', {'class': 'box grey-bg'}).appendTo($d);
        $('td', this).each(function(j, el) {
            var n = j + 1;
            var $row = $('<div>', {
                //'class': 'row-' + n
                'class': 'row'
            });
            $row.append(
            $('<span>', {
                //'class': 'label-' + n,
                'class': 'label',
                text: th[j]
            }), ' : ', $('<span>', {
                //'class': 'data-' + n,
                'class': 'data',
                text: $(this).text()
            })).appendTo($div);
        });
    });
            }
        }
                                    });
    }
}
checkResult();

Answer 3

//Need to figure out how execute this if there are more than 2 columns in the table???
function foo(that) {
    that.find("tr").each(function(){
        if ($(this).find("td").size() > 2)
            that.addClass("strip-these");  
            return;
    });
}

$('.content table').each(function() {
    foo($(this));
});
console.log($(".strip-these"));
$('.strip-these').each(function() {
    $('tr', this).each(function() {
        var length = $('td', this).length;
        console.log(length);
        if (length > 2) {
            // code
            $('.strip-these').replaceWith(function() {

                var $th = $(this).find('th'); // get headers
                var th = $th.map(function() {
                    return $(this).text();
                }).get(); // and their values
                $th.closest('tr').remove(); // then remove them
                var $d = $('<div>', {
                    'class': 'responsive-table'
                });

                $('tr', this).each(function(i, el) {
                    var $div = $('<div>', {
                        'class': 'box grey-bg'
                    }).appendTo($d);
                    $('td', this).each(function(j, el) {
                        var n = j + 1;
                        var $row = $('<div>', {
                            //'class': 'row-' + n
                            'class': 'row'
                        });
                        $row.append(
                        $('<span>', {
                            //'class': 'label-' + n,
                            'class': 'label',
                            text: th[j]
                        }), ' : ', $('<span>', {
                            //'class': 'data-' + n,
                            'class': 'data',
                            text: $(this).text()
                        })).appendTo($div);
                    });
                });
                return $d;
            });



        }
    });
});

jQuery如果表连续超过2个td且有2个条件

3 个答案: