Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to sort html tables". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The process for sorting tables is as follows:

Get the header cells clicked by the mouse to traverse all of our data, so as to get the corresponding tags, and then we will generate our array and compare the contents in different ways according to different settings, so that the array array is sorted according to the comparison results; then the sorted array elements are re-assigned to the empty ones. If the column has already been sorted, the array is inverted directly.

Table sort p {width: 1024px; margin: 0 auto / * p is centered around the screen * /} table {border: solid 1px # 666; border-collapse: collapse; width: 100%; cursor: default } tr {border: solid 1px # 666; height: 30px;} table thead tr {background-color: # ccc } td {border: solid 1px # 666;} th {border: solid 1px # 666; text-align: center; cursor: pointer } .sequence {text-align: center;} .hover {background-color: # 3399FF;}

Serial number, title, price (yuan), time of publication, printing volume (volume) IP 1 Wolf Totem 29.80 2009-10 50000 192.168.1.125 2 filial piety cannot wait 29.80 2009-09 800 192.68.1.125 3 Tibetan password 2 28.00 2008-10 192.102.0.12 4 Tibetan password 1 24.80 2008-10 215.34.126.10 5 Zen of design pattern 69.00 2011-12 192.168.1.5 6 Lightweight Java EE enterprise application practice 99.00 2012-04 5000 192.358.1.125 7 Java Development practice Classic 79.80 2012-01 2000 192.168.1.25 8 Java Web Development practice Classic 69.80 2011-11 2500 215.168.54.125

$(document) .ready (function () {var tableObject = $('# tableSort'); / / get the table object whose id is tableSort var tbHead = tableObject.children ('thead'); / / get thead var tbHeadTh = tbHead.find (' tr th') under the table object / / get th var tbBody = tableObject.children ('tbody') under tr under thead; / / get tbody var tbBodyTr = tbBody.find (' tr') under table object; / / get tr var sortIndex =-1 under tbody / / initialize the index tbHeadTh.each (function () {/ / traverse th var thisIndex = tbHeadTh.index ($(this)) under the tr of thead) / / get the column number of the th / / the effect of mouse removal and focus Not important $(this) .mouseover (function () {/ / mouse move event tbBodyTr.each (function () {/ / arrange tr var tds under tbody = $(this) .find ("td") / / get the collection of td objects whose column number is parameter index $(TDs [thisIndex]) .addClass ("hover");}) ) .mouseout (function () {/ / mouse focus time tbBodyTr.each (function () {var tds = $(this) .find ("td") $(TDS [thisIndex]) .removeClass ("hover");});}) $(this) .click (function () {/ / mouse click event var dataType = $(this) .attr ("type"); / / get the type checkColumnValue (thisIndex, dataType) of the current click column / / sort the currently clicked column (current index, sort type)});}); / / display effect, not important $("tbody tr") .removeClass () / / remove all css classes of tr under tbody $("tbody tr") .Mouseover (function () {$(this) .addClass ("hover");}) .mouseout (function () {$(this) .removeClass ("hover")) }); / / sort function checkColumnValue (index, type) {var trsValue = new Array () / / create a new list tbBodyTr.each (function () {/ / traverse all tr tags var tds = $(this). Find ('td')) / / find all td tags / / push the current click column to a new list / / include the type of the current row and the value of the current index And the value of the current row trsValue.push (type + ".comparator" + $(TDs [index]). Html () + ".comparator" + $(this) .html ()) $(this) .html (""); / / clear as the first column}); var len = trsValue.length / / get the length of all the columns to be filmed if (index = = sortIndex) {/ / sortIndex =-1 trsValue.reverse (); / /?} else {for (var I = 0; I)

< len; i++) { //遍历所有的行 type = trsValue[i].split(".separator")[0]; // 获取要排序的类型 for (var j = i + 1; j < len; j++) { value1 = trsValue[i].split(".separator")[1]; //当前值 value2 = trsValue[j].split(".separator")[1]; //当前值的下一个 if (type == "number") { //js 三元运算 如果 values1 等于 '' （空） 那么，该值就为0，否则 改值为当前值 value1 = value1 == "" ? 0 : value1; value2 = value2 == "" ? 0 : value2; //parseFloat() 函数可解析一个字符串，并返回一个浮点数。 //该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。 //如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。 if (parseFloat(value1) >

ParseFloat (value2) {/ / if the current value is greater than the next value var temp = trsValue [j]; / / then remember the larger value trsValue [j] = trsValue [I] TrsValue [I] = temp }} else if (type = = "ip") {if (ip2int (value1) > ip2int (value2)) {var temp = trsValue [j] TrsValue [j] = trsValue [I]; trsValue [I] = temp The else {/ / JavaScript localeCompare () method compares two strings in a local-specific order. / / the number indicating the result of the comparison. / / if stringObject is less than target, localeCompare () returns a number less than 0. / / if stringObject is greater than target, the method returns a number greater than 0. / / if two strings are equal, or if there is no difference based on the local collation, the method returns 0. If (value1.localeCompare (value2) > 0) {/ / this method is not compatible with Google browser var temp = trsValue [j]; trsValue [j] = trsValue [I] TrsValue [I] = temp }}} }} for (var I = 0 I < len Index +) {/ / insert sorted values into the table / /: eq (index) matches an element of $("tbody tr:eq (" + I + ") with a given index value ) ") .html (trsValue[ I] .split (" .comparator ") [2]) / / console.log ($("tbody tr:eq (" + I + ")") .html ()} sortIndex = index } / / IP is converted to integer? The function ip2int (ip) {var num = 0; ip = ip.split ("."); / / Number () function converts the value of an object to a number. Num = Number (ip [0]) * 256 * 256 * 256 + Number (ip [1]) * 256 * 256 + Number (ip [2]) * 256 + Number (ip [3]); return num }) this is the end of the content of "how to sort html tables". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.