Adding rows to a table with jQuery
I am trying to develop a plugin for jQuery. This is my first plugin, and I am stuck in the initial phase.
I need to do following things: I need to find the "add row" link from the table and bind 开发者_如何学JAVAto the click event. When the link is clicked, it should add a new row by cloning the existing template row. Initially the template row is hidden.
Following is the HTML.
<table id='grid1'>
<tr>
<td><a href='#' id='add_row'>Add New Row</a></td>
</tr>
<tr>
<td>
<table id='data_table'>
<tr><th>Col1</th><th>Col2</th><th>Col3</th></tr>
<tr><td>Data1</td><td>Data2</td><td>Col3</td></tr>
<tr id='template_row'>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
</tr>
</table>
</td>
</tr>
</table>
And my jQuery so far:
(function($) {
$.extend($.fn, {
editableGrid: function() {
function addRow() {
//code to clone here but i need the instance of main table here ie grid1
}
this.find('#add_row').bind("click",addRow);
}
});
})(jQuery);
You need to .detach() the template from the table and put it on a factory variable, like:
var factory = $('#template_row').detach();
factory.removeAttr('id'); // Suggestion for Tomalak
It will hidden (not really) from the table. Next step is bind click on your link and specify here will go the new factory.clone item. Like:
$('button.new-link').click(function(){
$('#data_table').append(factory.clone(true));
});
Take a look too in .clone() and plugin authoring
Going on from your current code:
(function($) {
$.extend($.fn, {
editableGrid: function() {
this.find("a.add_row").click(function () {
var $table = $(this).parent("table").find("table.data_table");
var $newRow = $table.find("tr.template_row").clone();
$newRow.removeClass("template_row"); // !!!
$table.append($newRow);
return false;
});
}
});
})(jQuery);
Notes
- work with CSS classes instead of IDs - only that way you can have multiple "editable grids" on one page
- there is no benefit of using
bind()
over usingclick()
here - you can pass functions directly as arguments - no need to define them separately
- it can improve readability/clarity to use verbose selectors (
"a.add_row"
is better than just".add_row"
) - in the outer function,
this
refers to a jQuery object containing all matched elements, soclick()
binds all of them in one step. - in the inner function,
this
refers to an individual DOM element (i.e. the clicked link) - it is not a jQuery object here! - don't forget to return
false
from theclick
function to prevent the browser default behavior - it's useful to prepend variables with a
$
to denote that they contain a jQuery object
No need for a plugin
just do this:
$('#add_row').click(function(){
var clone = $('#template_row').clone();
clone.removeAttr('id');
clone.appendTo('#data_table');
})
Here is a demo: http://jsfiddle.net/Jw5TF/
$.fn.myTableTingPlugin = function() {
var self = this;
$(self).find(".template_row").hide(); // or use css class
$(this).find(".add_row").click(function() {
// shuld probebly not use ids if its a plugin
// so i use a class here
var newRow = $(self).find(".template_row").clone();
$(self).find(".data_table").append(newRow);
});
};
First, don't use ids, classes are better. And double quotes are better too.
<table class="extendableTable">
<tr>
<td><a href="#" class="extendLink">Add New Row</a></td>
</tr>
<tr>
<td>
<table id="data_table">
<tr><th>Col1</th><th>Col2</th><th>Col3</th></tr>
<tr><td>Data1</td><td>Data2</td><td>Col3</td></tr>
<tr id='template_row'>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</table>
</td>
</tr>
</table>
Source code of the plugin:
(function($) {
$.fn.extendableTable = function(options){
var table = this;
this.find('.extendLink').click(function(){
table.find('.dataTable .templateRow:first').clone().appendTo(table.find('.dataTable'));
return false;
});
}
})(jQuery);
And then you can use plugin in such a way:
$('.extendableTable').extendableTable();
精彩评论