javascript - jquery tablesorter 不适用于输入/选择字段 (IE8)，适用于 IE8 中的所有其他文本字段

Question

还在所有其他浏览器上对所有字段进行正确排序。

唯一的问题是当字段是输入字段(jquery datepicker)或特定的选择框时 IE8。

 <tr class="proj_rec" data-id="<?php echo $project->get_id(); ?>">
                    <td class="proj_id">
                        <?php echo $project->get_id(); ?>
                    </td>
                    <td>
                        <?php echo $project->get_desc(); ?>
                    </td>
                    <td class="edit">
                        <select class="touch">
                            <?php echo $opt_html_business_area; ?>
                        </select>
                        <span class="look">
                            <?php echo $project->get_business_area(); ?>
                        </span>
                    </td>
                    <td class="edit">
                        <select class="touch">
                            <?php echo $opt_html_status; ?>
                        </select>
                        <span class="look">
                            <?php echo $project->get_status(); ?>
                        </span>
                    </td>
                    <td class="edit">
                        <select class="touch">
                            <?php echo $opt_html_type; ?>
                        </select>
                        <span class="look">
                            <?php echo $project->get_type(); ?>
                        </span>
                    </td>
                    <td class="edit">
                        <input type="text" class="touch">
                        </input>
                        <span class="look">
                            <?php echo $project->get_owner(); ?>
                        </span>
                    </td>
                    <td>
                        <?php echo $project->get_enter_date(); ?>
                    </td>
                    <td class="edit">
                        <input type="text" class="touch dtpick">
                        </input>
                        <span class="look">
                            <?php echo $project->get_est_date(); ?>
                        </span>
                    </td>
                    <td class="edit">
                        <input type="text" class="touch dtpick">
                        </input>
                        <span class="look">
                            <?php echo $project->get_due_date(); ?>
                        </span>
                    </td>
                    <td class="edit">
                        <input type="text" class="touch dtpick">
                        </input>
                        <span class="look">
                            <?php echo $project->get_next_date(); ?>
                        </span>
                    </td>


//project events that happen only on page load
function on_load_events() {
    // Adding a new slot
    $('#add_project').click(function() {
        var emp = $('#entered_new').val();
        add_project(emp);
    });

    $('#project_table').bind('sortStart',function() {
        back_to_look();
        $('span.cmnt_active').each(function() {
            remove_comments($(this));
        });
    });

    $('#project_table').tablesorter({
        textExtraction: myTextExtraction
    });

    //todo: try getting the dataTable to work...
    //  it might be way better, just not sure how it would handle
    //  adding unrelated rows on the fly (comments)
    //$('#project_table').dataTable();
}

String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};

var myTextExtraction = function(node)  
{
    var elem = $(node);
    var theVal = null;

    if (elem.hasClass('edit')) {
        elem.children().each(function() {
            if ($(this).css('display') != 'none') {
                theVal = $(this).val();
            }
        });

    } else {
        theVal = elem.text();
    }

    //console.log(theVal);


    var c = node.childNodes.length;

    if (c == 1) {
        theVal = node.innerHTML.trim();
    } else if (c == 5) {
        theVal = node.childNodes[3].innerHTML.trim();
    }

    //console.log(theVal);
    return theVal;

} 

我是否需要像这个 fiddle 中那样的条件语句？

http://jsfiddle.net/Mottie/AqXEA/1/

如有任何帮助，我们将不胜感激。

Answer 1

因此您发布的 jsfiddle 没有任何日期选择器输入或选择。我创建了一个新的 jsfiddle ，这有望代表您的数据。在您的情况下，您希望 textExtraction 函数了解内容并检索正确的值。下面的函数将获取日期选择器的输入值和选择的选定值。

        textExtraction: function(node)  
        {
            var elem = $(node);
            var text = '';
            if(elem.find('input').length > 0){
                text = elem.find('input').val().trim();     
            } else if(elem.find('select').length > 0){
                text = elem.find('select option[selected]').text().trim();
            } else {
                text = elem.text().trim();
            }
          return text;
        }

请注意，这不是最有效的实现方式，具体取决于您拥有的数据量，但它应该可以帮助您朝着正确的方向前进。希望有帮助