Question

下面的小提琴效果很好但是当我尝试在空白测试文档中重新创建它时，没有任何反应。我做错了什么？

这是我的小提琴。 https://jsfiddle.net/1djad595/2/

这是更新的代码，我无法复制上面小提琴的成功。。

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />

</head>


<body>
<script>

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 

    </script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.8/js/jquery.tablesorter.min.js">
</script> 
<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 


</body>
</html>

Answer 1

我认为你需要在正确的顺序中将脚本库包含在代码中，首先是jQuery libarary然后是tablesorter

如果您复制以下代码，它必须适合您：

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
);

table.tablesorter {
	font-size: 12px;
	background-color: #4D4D4D;
	width: 100%;
	border: 1px solid #000;
}
table.tablesorter th {
	text-align: left;
	padding: 5px;
	background-color: #6E6E6E;
	color: #fff;
}
table.tablesorter td {
	color: #FFF;
	padding: 5px;
}
table.tablesorter .even {
	background-color: #3D3D3D;
}
table.tablesorter .odd {
	background-color: #6E6E6E;
}
table.tablesorter .header {
	background-image: url(bg.png);
	background-repeat: no-repeat;
	border-left: 1px solid #FFF;
	border-right: 1px solid #000;
	border-top: 1px solid #FFF;
	padding-left: 30px;
	padding-top: 8px;
	height: auto;
}
table.tablesorter .headerSortUp {
	background-image: url(asc.png);
	background-repeat: no-repeat;
}
table.tablesorter .headerSortDown {
	background-image: url(desc.png);
	background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.8/js/jquery.tablesorter.min.js"></script>

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table>

表排序功能不适用于小提琴外

1 个答案: