It's a plugin that I think is basically perfect, it includes add, delete, insert, move up and down, index identification, quantity control and so on, basically can meet the requirements of most of the multiple lines added, of course, in the completion of these functions, I also try to maintain a small amount of code and easy to understand the logic.
The demo page of this plugin is http://www.lovewebgames.com/demo/autoAdd/autoAdd.html, citing the introduction of the automatic add delete line of the jquery plugin, which is a simple plugin, Its function is: a system has a large number of needs to duplicate a row to add , want to be able to do bulk operation, you can use this plug-in.
The plug-in effect diagram is as follows:
In the previous chapter has mentioned some of the basics of making jquery plug-ins, the next step is to complete this function, I try to write to attract people's attention, first of all, we want to complete the most basic copy line function, many people, are favored to splicing HTML code, They feel that the entrance to this plugin should be after passing in a section of HTML code, you can copy this HTML template again, I can't say this is wrong, because it can do this work, but if you want to copy the lines of the code more, there are more complex controls, such as the existence of calendars or city level three menu, etc. , so you are very difficult to maintain, we do the front-end, is to make the program to do less things, so that users more quickly and conveniently experience. So I try not to let the program go to the Escape stitching code, the work left to Js,jquery in a clone (bool) method is very useful, it has a
Boolean parameter, if you want to completely copy a DOM object, including the event above it, you can use the Clone (true), so that there is less time to bind the event of the trap, so this plug-in callback method, in fact, it is difficult to use. The code for adding lines is as follows:
Copy Code code as follows:
function AddRow (num, Isinsert, target) {
for (var i = 0; i < Num-count; i++) {
var temp = Content.find ("." + Settings.temprowclass). (a)-I (). Clone (True);
Temp.find ("Input"). Val ("");
Temp.find ("select"). Val ("-1");
Temp.find ("textarea"). Val ("");
Temp.find (": CheckBox"). attr ("checked", false);
TEMP.ATTR ("id", "");
Temp.find ("Input,tr,textarea,select,:checkbox,tbody"). attr ("id", "");
if (Temp.find (". RichText"). Length > 0) {
Temp.find (". Ke-container"). Remove ();
}
Temp.find (". Richtext,input"). each (function () {
$ (this). attr ("id", "txt_" + Math.Round (Math.random () * New Date (). GetTime ()))
$ (this). Show ();
});
if (Isinsert) {
Temp.insertbefore (Target.closest ("." + Settings.temprowclass));
} else {
Content.append (temp);
}
}
if (Num < count) {
for (var j = count-1 J >= num; j--) {
Delrow (Content.find (".") +settings.temprowclass). EQ (j));
}
} else {
if (Settings.addcallback)
Settings.addcallback ($ (temp));
}
Count = Content.find ("." + settings.temprowclass). length;
Settings.changeInput.val (count);
SumIndex ();
SHOWHIDEBTN ();
};
As you may notice, when I write these methods, I have to call the content in front and then look for a subset, this is to a page at the same time multiple calls, there is a conflict.
This plug-in to write this is basically finished, just hundred line code, completed a I think a good and practical gadgets, call later, just need to set in the HTML corresponding class on the line, how easy, whether it is also happy? That is not known, the code is relatively rough, such as a master, you can help me improve under, welcome everyone to discuss, since the so-called send people chrysanthemum, leaving more incense, everyone add me Q Group together to learn progress! 70210212 or 77813547.
