Introduction to the function of automatically adding and deleting rows by making your own jquery plug-in_jquery

This is a plug-in that I think has basically complete functions. It includes functions such as adding, deleting, inserting, moving up and down, index marking, quantity control, etc. It can basically meet the needs of most multi-line additions. Of course, before completing these functions Next, I also try to keep the amount of code as small as possible and the logic easy to understand.

The demo page of this plug-in is http://www.lovewebgames.com/demo/autoAdd/autoAdd.html, refer to Make your own jquery plug-in to automatically add and delete rows (Part 1) As introduced in , this is a simple plug-in. Its function is: there are a large number of in a system that need to copy and add , you can use this plug-in when you want to be able to perform batch operations.

The plug-in rendering is as follows:

In the previous article of we have already mentioned some basic knowledge of making jquery plug-ins. The next step is to complete this function. I try to write it in an eye-catching way. First, we have to complete the most basic Many people prefer to splice HTML code for the copy line function. They think that the entry point of this plug-in should be to pass in a piece of HTML code and then copy the template of the HTML. I can't say that this approach is wrong, because It can indeed complete this work, but if the lines of code you want to copy are more and there are more complex controls, such as a calendar or a three-level city menu, etc., it will be very difficult for you to maintain. We do the front-end , is to allow programmers to do less work and provide users with a faster and more convenient experience. So I try not to let the program escape the splicing code and leave these tasks to JS. There is a clone(bool) method in jquery that is very useful. It has a

Boolean type parameters, if you want to completely copy a DOM object, including the events on it, you can use clone(true), which will save you the trouble of binding events again, so this plug-in The callback method is actually difficult to use. The code to add a row is as follows:

Copy the code The code is as follows:

function addRow(num, isInsert , target) {
for (var i = 0; i < num - count; i ) {
var temp = content.find("." settings.tempRowClass).first().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();
};

You may have noticed that when I wrote these methods, I always called content before searching for the subset. This is to prevent conflicts when multiple calls occur on a page at the same time.

This plug-in is basically complete after writing it. With only a few hundred lines of code, I have completed a small tool that I think is good and practical. To call it in the future, you only need to set the corresponding settings in the HTML. Just take a class. It’s so easy. Is it also happy? I don’t know. The code is relatively rough. If there are experts, you can help me improve it. Everyone is welcome to discuss it together. It is said that giving away chrysanthemums leaves a lingering fragrance. Please join my Q group to learn and improve together! 70210212 or 77813547.