javascript - 隐藏行的表排序问题

Question

Example Fiddle

隐藏行的表格排序问题。我创造了 fiddle 。请帮忙解决这个问题。

function sortTable(f, n) {
    var rows = $('.videolisttble tbody  tr').get();
    rows.sort(function (a, b) {
        var A = getVal(a);
        var B = getVal(b);
        if (A < B) {
            return -1 * f;
        }
        if (A > B) {
            return 1 * f;
        }
        return 0;
    });

    function getVal(elm) {
        var v = $(elm).children('td').eq(n).text().toUpperCase();
        if ($.isNumeric(v)) {
            v = parseInt(v, 10);
        }
        return v;
    }

    $.each(rows, function (index, row) {
        $('.videolisttble').children('tbody').append(row);
    });
}

var f_sl = 1;
var f_nm = 1;

$(".matchhead").click(function () {
    f_sl *= -1;
    var n = $(this).prevAll().length;
    sortTable(f_sl, n);
});

$(".timehead").click(function () {
    f_nm *= -1;
    var n = $(this).prevAll().length;
    sortTable(f_nm, n);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>

<h2> Before sorting</h2>
  
<table class="table table-responsive videolisttble dataTable no-footer" id="DataTables_Table_0">
		<thead>
			<tr><th class="matchhead">Match</th><th class="timehead">Date &amp; Time</th><th> Action</th></tr>
		</thead>
		<tbody>	
		 
			<tr class="manageiconswrap" role="row">
				<td>D Team  vs Team E</td>
				<td>Tuesday March 15th, 2016, 05:00 PM</td>
				<td class="actioncont">										
				</td>
			</tr>					
			<tr class="donotsort">
				<td colspan="3" style="display:none;"class="toggledropcont">D Team</td>
			</tr>
			<tr class="donotsort">
				<td colspan="3" style="display:none;"class="toggledropcont">Team E</td>
			</tr>
			<tr class="manageiconswrap">
				<td>C Team  vs Team F</td>
				<td>Sunday October 18th, 2015, 03:00 PM</td>
				<td class="actioncont"></td>
			</tr>	

			<tr class="donotsort">
				<td colspan="3" style="display:none;"class="toggledropcont">C Team</td>
			</tr>
			<tr class="donotsort">
				<td colspan="3" style="display:none;"class="toggledropcont">Team F</td>
			</tr>
			<tr class="manageiconswrap">
				<td>A Team  vs Team B</td>
				<td>Sunday October 18th, 2015, 03:00 PM</td>
				<td class="actioncont"></td>
			</tr>
			<tr class="donotsort">
				<td colspan="3" style="display:none;"class="toggledropcont">A Team</td>
			</tr>
			<tr class="donotsort">
				<td colspan="3" style="display:none;"class="toggledropcont">Team B</td>
			</tr>
	  
	</tbody>
</table>
  
  
  	
<h2> After sorting</h2>


<table class="table table-responsive  dataTable no-footer" id="DataTables_Table_0">
		<thead>
			<tr><th class="">Match</th><th class="">Date &amp; Time</th><th> Action</th></tr>
		</thead>
		<tbody>	
			
			
			<tr class="manageiconswrap">
				<td>A Team  vs Team B</td>
				<td>Sunday October 18th, 2015, 03:00 PM</td>
				<td class="actioncont"></td>
			</tr>
			<tr class="donotsort">
				<td colspan="3" style="display:none;"class="toggledropcont">A Team</td>
			</tr>
			<tr class="donotsort">
				<td colspan="3" style="display:none;"class="toggledropcont">Team B</td>
			</tr>
			<tr class="manageiconswrap">
				<td>C Team  vs Team F</td>
				<td>Sunday October 18th, 2015, 03:00 PM</td>
				<td class="actioncont"></td>
			</tr>	

			<tr class="donotsort">
				<td colspan="3" style="display:none;"class="toggledropcont">C Team</td>
			</tr>
			<tr class="donotsort">
				<td colspan="3" style="display:none;"class="toggledropcont">Team F</td>
			</tr>
			<tr class="manageiconswrap" role="row">
				<td>D Team  vs Team E</td>
				<td>Tuesday March 15th, 2016, 05:00 PM</td>
				<td class="actioncont">										
				</td>
			</tr>					
			<tr class="donotsort">
				<td colspan="3" style="display:none;"class="toggledropcont">D Team</td>
			</tr>
			<tr class="donotsort">
				<td colspan="3" style="display:none;"class="toggledropcont">Team E</td>
			</tr>
	  
	</tbody>
</table>

Answer 1

Working fiddle

由于嵌套表格，该函数将在表格行之间混淆，并对子表格行进行排序，以避免您必须更改选择器以仅针对 .videolisttble 直接行。

使用 > 符号来定位直接子节点:

var rows = $('.videolisttble>tbody>tr').get();

希望这对您有所帮助。