Question

我有一个使用jquery tablesorter的表。我希望通过包含jquery代码来扩展其功能，当点击给定行的任何部分时，它将检查该行中的复选框，并且还会更改模拟该行被选中的行背景颜色。

在独立示例中，用于检查复选框的代码工作正常，但是一旦我应用tablesorter CSS，它就不会更改行背景。它仍然会检查框，我只是无法通过更改其背景颜色来模拟行的选择。

以下是代码和两个示例链接：

不适用于tablesorter：http://www.laredo.edu/hb2504/table.php 作为独立工作：http://www.laredo.edu/hb2504/table2.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HB2504 - Syllabi</title>


    <!-- --><link rel="stylesheet" href="themes/blue/style.css" type="text/css" media="print, projection, screen" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.tablesorter.js"></script>


    <script type="text/javascript">

    $(function() {      





////////////////////////////////////////////////  function for instructional  //////////////////////////////////////////////////
  // call the tablesorter plugin
  $("#tablesorter-demo").tablesorter({
  // Raul uncomment this to start sort automatically first //sortList:[[0,0]], 
  widgets: ['zebra'],
   theme : 'blue',

    dateFormat : "mmddyyyy", // set the default date format

    // or to change the format for specific columns, add the dateFormat to the headers option:
    headers: {
      //3: { sorter: "shortDate" } //, dateFormat will parsed as the default above
      // 1: { sorter: "shortDate", dateFormat: "ddmmyyyy" }, // set day first format; set using class names
      // 2: { sorter: "shortDate", dateFormat: "yyyymmdd" }  // set year first format; set using data attributes (jQuery data)
    }


  });
////////////////////////////////////////////////  function for instructional  //////////////////////////////////////////////////




    }); 

    </script>


    <style type="text/css">

    body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 1024px;
}
    </style>




  <style type="text/css">
    td {
    border: 0px solid;
    }

    .syllabus td{
    border: 1px solid;  
     margin: 0;
    padding: 0;

    }

  </style>

    <style type='text/css'>

.highlight_row {
    background: #eee;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(document).ready(function () {
    $('.tablesorter tr').click(function (event) {
        if (event.target.type !== 'checkbox') {
            $(':checkbox', this).trigger('click');
        }
    });

    $("input[type='checkbox']").change(function (e) {
        if ($(this).is(":checked")) {
            $(this).closest('tr').addClass("highlight_row");
        } else {
            $(this).closest('tr').removeClass("highlight_row");
        }
    });
});

</script>



</head>

<body>
<table style="text-align:left;padding:0px 15px 0px 15px;width:1024px;" id="tablesorter-demo" class="tablesorter">

<thead>
    <tr>
        <th>CH</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
</thead>




  <tbody>
    <tr>
        <td><input type=checkbox></td>
        <td>Anabel</td>
        <td>Beto</td>
        <td>Carmen</td>
    </tr>

    <tr>
        <td><input type=checkbox></td>
        <td>Daniel</td>
        <td>Ernesto</td>
        <td>Fernando</td>
    </tr>
    </tbody>


</table>

</body>

Answer 1

尝试使用"forms" demo修改过的代码，以允许点击该行以选中相框 - working demo。

// checkbox parser
$.tablesorter.addParser( {
    id: 'checkbox',
    is: function( s ) {
        return false;
    },
    format: function( s, table, cell ) {
        var $c = $( cell ).find( 'input' );
        return $c.length ? $c.is( ':checked' ) ? 1 : 2 : s;
    },
    type: 'numeric'
});

$( function() {
    // using .on() which requires jQuery 1.7+
    $( 'table' ).on( 'tablesorter-initialized', function() {

        // class name to add on tr when checkbox is checked
        var highlightClass = 'checked',
        // resort the table after the checkbox is modified?
        resort = true,
        // if a server side database needs to be updated, do it here
        serverCallback = function( table, inputElement ) {},

        $table = $( this ),
        c = this.config,
        wo = c && c.widgetOptions,
        // include sticky header checkbox; if installed
        $sticky = c && wo.$sticky || '',
        doChecky = function( c, col ) {
            $table
                .children( 'tbody' )
                .children( 'tr:visible' )
                .children( 'td:nth-child( ' + ( parseInt( col, 10 ) + 1 ) + ' )' )
                .find( 'input' )
                .each( function() {
                    this.checked = c;
                    $( this ).trigger( 'change' );
                });
        };

        $table
            .children( 'tbody' )
            .on( 'click', 'tr', function() {
                // clicking on row, toggles the checkbox in first column
                $(this).children('td:first').find('input[type=checkbox]')
                    .prop('checked', function(i, val) {
                        return !val;
                    })
                    // trigger a change so tablesorter will update the value
                    .trigger('change');
            })
            .end()
            .on( 'change', 'input', function() {
                // ignore change if updating all rows
                if ( $table[0].ignoreChange ) { return; }
                var col, $this = $( this );
                $this.closest( 'tr' ).toggleClass( highlightClass, this.checked );
                $this.trigger( 'updateCell', [ $this.closest( 'td' ), resort ] );
                // if your server side database needs more parameters, add them here sent to the callback
                serverCallback( $table[0], this );
                // uncheck header if any checkboxes are unchecked
                if ( !this.checked ) {
                    $table.add( $sticky ).find( 'thead input' ).prop( 'checked', false );
                }
            })
            .end()
            .add( $sticky )
            .find( 'thead input' )
            // Click on checkbox in table header to toggle all inputs
            .on( 'change', function() {
                // prevent updateCell for every cell
                $table[0].ignoreChange = true;
                var c = this.checked,
                    col = $( this ).closest( 'th' ).attr( 'data-column' );
                doChecky( c, col );
                // update main & sticky header
                $table.add( $sticky ).find( 'th[data-column=' + col + '] input' ).prop( 'checked', c );
                $table.children( 'tbody' ).children( 'tr:visible' ).toggleClass( highlightClass, c );
                // update all at once
                $table[0].ignoreChange = false;
                $table.trigger( 'update', [ resort ] );
            })
            .on( 'mouseup', function() {
                return false;
            });

    });
});


$(function(){
    $('table').tablesorter({
        theme: 'blackice',
        widgets: ['zebra', 'stickyHeaders'],
        headers: {
            0: { sorter: 'checkbox' }
        }
    });
});

Answer 2

回答答案1.

该脚本效果很好，但稍作修改。我使用here中的代码，它与您提供的代码非常相似。这个做了相反的事情，即突出显示复选框上的行。

您提供的那个在选中行时检查了该框，但是两个代码都没有同时执行，因此我将它们混合起来以便选中复选框并在行单击或选中复选框时突出显示该行。

以下是完整的代码和工作演示：

Demo

<!DOCTYPE html>
<html>
<head>


<script>
function clearForms()
{
  var i;
  for (i = 0; (i < document.forms.length); i++) {
    document.forms[i].reset();
  }
}
</script>





  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script src="js/jquery.min.js"></script>




    <script type="text/javascript" src="js/jquery.tablesorterblack.js"></script>
    <link rel="stylesheet" href="themes/black/black.css" type="text/css" media="print, projection, screen" /> 


  <style type='text/css'>


table.tablesorter tbody tr.odd.checked td {
    background: #8080c0;
    color: #fff;
}
table.tablesorter tbody tr.even.checked td {
    background: #a0a0e0;
    color: #fff;
}

.spacer { height: 1000px; }

a {
    text-decoration: none;
    color: #ffffff; 
}
  </style>

</head>
<body onLoad="clearForms()" onUnload="clearForms()">

<form method=POST action="table3php.php">
<table class="tablesorter">

     <thead>
         <tr>
             <th></th>
             <th>Course</th>
             <th>Course Title</th>
            <!-- <th>Last Name</th>
             <th>First Name</th> -->
         </tr>
     </thead>

     <tbody>
<tr>

<td><input type=checkbox name=course[] value=GOVT2305M01></td>

<td>GOVT2305M01</td>

<td>Federal Government </td>

</tr>

<tr>

<td><input type=checkbox name=course[] value=GOVT2306M07></td>

<td>GOVT2306M07</td>

<td>Texas Government </td>

</tr>

<tr>

<td><input type=checkbox name=course[] value=GOVT2305M04></td>

<td>GOVT2305M04</td>

<td>Federal Government </td>

</tr>

<tr>

<td><input type=checkbox name=course[] value=GOVT2306M01></td>

<td>GOVT2306M01</td>

<td>Texas Government </td>

</tr>

<tr>

<td><input type=checkbox name=course[] value=GOVT2305M03></td>

<td>GOVT2305M03</td>

<td>Federal Government </td>

</tr>

<tr>

<td><input type=checkbox name=course[] value=GOVT2305M02></td>

<td>GOVT2305M02</td>

<td>Federal Government </td>

</tr>

<tr>

<td><input type=checkbox name=course[] value=GOVT2306E01></td>

<td>GOVT2306E01</td>

<td>Texas Government </td>

</tr>

     </tbody>



</table>

<input type="submit" name="submit" value="Submit">
</form>

<div class="spacer"></div>



<script type='text/javascript'>


$(document).ready(function() {
    $('.tablesorter tr').click(function(event) {
        if (event.target.type !== 'checkbox') {
            $(':checkbox', this).trigger('click');
        }
    });
});

// add parser through the tablesorter addParser method
$.tablesorter.addParser({
    id: 'checkbox',
    is: function(s) {
        return false;
    },
    format: function(s, table, cell, cellIndex) {
        var $t = $(table), $c = $(cell), c,

        // column containing all of the checkboxes (zero-based index)
        columnWithCheckboxes = 0,
        // resort the table after the checkbox status has changed
        resort = false;

        if (!$t.hasClass('hasCheckbox')) {
            $t
            .addClass('hasCheckbox')
            // make checkbox in header set all others
            .find('thead th:eq(' + columnWithCheckboxes + ') input[type=checkbox]')
            .bind('change', function(){
                c = this.checked;
                $t.find('tbody tr td:nth-child(' + (columnWithCheckboxes + 1) + ') input').each(function(){
                  this.checked = c;
                  $(this).trigger('change');
                });
            })
            .bind('mouseup', function(){
                return false;
            });
            $t.find('tbody tr').each(function(){
                $(this).find('td:eq(' + columnWithCheckboxes + ')').find('input[type=checkbox]').bind('change', function(){
                    $t.trigger('updateCell', [$(this).closest('td')[0], resort]);
                });
            });
        }
        // return 1 for true, 2 for false, so true sorts before false
        c = ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
        $c.closest('tr')[ c === 1 ? 'addClass' : 'removeClass' ]('checked');
        return c;
    },
    type: 'numeric'
});

$(function() {
    $('table').tablesorter({
        theme: 'blackice',
        widgets: ['zebra', 'stickyHeaders'],
        headers: {
            0: {
                sorter: 'checkbox'
            }
        }
    });
});

</script>

</body>
</html>

在tablesorter和行检查器中的jquery

2 个答案: