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 | // Set up the table that contains the widget. // Note that we add a class to it called // "percentSimple", which will be used in the jQuery // code, as well as adding a unique // ID to the table "sortTable1". // Also note that each text field that will have a percent // typed into it has the // class of "percent" added to it. // Finally, note in the table footer a field called "percentTotal" <p><table width=300 class="percentSimple" cellpadding=0 cellspacing=0 id=sortTable1> <tbody> <tr><td class="left"> S&P 500 Index </td> <td> <input type=text class="percent textfield"> % </td> </tr> ....... <tfoot> <tr><td> Total </td> <td> <span class=percentTotal></span> % </td> </tr> </tfoot> // take advantage of our previous plug-in and limit the percent fields // to just numbers $(".percent").numeric(); // capture any keyup events from all the "percent" fields // when these occur, we are going to recalculate the total percent $("table.percentSimple input.percent").keyup(function(){ // figure out which table this occurred in (in case there's more than // 1 widget on a page var table = $(this).parents().filter("table.percentSimple"); var ID = table.attr("id"); // Find the sum of all the "percent" fields, by using // our calculation plug-in var sum = $("#" + ID + " input.percent").sum(); // cache the span called "percentTotal" var totalField = $("#" + ID + " .percentTotal"); // update the total in the "percentTotal" field totalField.html(sum); // if the sum != 100%, then we'll attach an error to it if (sum != 100 && sum != 0) { totalField.addClass("error"); } else { totalField.removeClass("error"); } }); |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |