1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | $(document).ready(function() { // the first step is to find all the tables on the page with // a class of percentSort. These are all the tables we want to // convert into our widget. // After we find them, we need to loop through them and take some // actions on them // At the conclusion of this block of code, each table that's going to // be a percentSort widget will have been transformed $("table.percentSort").each(function(i){ // each table needs a unique ID, for namespace issues (discussed later) // we can simply create a uniqueID from the loop counter $(this).attr("id", "percentSort-"+i); // within each table, let's highlight every other row in the table, to // give it that "zebra" look $(this).find("tbody > tr").filter("dd").addClass("highlight"); // because each table needs to show the "Total" to the user, let's create a new // section of the table in the footer. We'll add a row in the table footer // to display the words "Total" and a span for the updated count. $("#"+$(this).attr("id") + " tfoot") .append("<tr><td>Total</td><td> <span></span> %</td></tr>"); // finally, let's add the CLASS of "percentTotal" to the span we just // created above. We'll use this information later to display // the updated totals $("#"+$(this).attr("id") + " tfoot span").addClass("percentTotal"); }); // now the second step, after we've completed setting up the tables themselves // is to set up the individual table rows. // We can similarly sort through each of them, taking the appropriate actions // on each of them in turn. // Upon completion of this block of code, each row in each table will be // transformed for our widget $("table.percentSort tbody > tr").each(function(i){ // get the namespace (to be discussed in the next section) var NAMESPACE = $(this).parents("table.percentSort").attr("id"); // attach a unique ID to this row. We can use the loop counter // to ensure the ID is unique on the page (which is a must on every page) $(this).attr("id", "row"+i); // now, within this row of the table, we need to find the text input, because // we need to attach a class to them. We utilize the namespace, and also // find the :text within the table row, and then attach the correct class $("#"+$(this).attr("id") + " :text").addClass("percent"); // Finally, we attach a unique ID to each of the text inputs, and we do this by // making it a combination of the table name and the row name. $("#"+$(this).attr("id") + " .percent"). attr("id", NAMESPACE + "-" + $(this).attr("id")); }); // Finally, because we know we only want numerical inputs, we restrict the text entry // to just numbers. We must do this now, because up until this point, the page // contained no elements with the CLASS "percent" $(".percent").numeric(); |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |