使用jQuery向表添加行 [英] Adding rows to a table with jQuery

问题描述

我正在尝试为jQuery开发一个插件。这是我的第一个插件，我陷入了初始阶段。

I am trying to develop a plugin for jQuery. This is my first plugin, and I am stuck in the initial phase.

我需要做以下事情：我需要从表中找到添加行链接并绑定到click事件。单击链接时，应通过克隆现有模板行来添加新行。最初隐藏模板行。

I need to do following things: I need to find the "add row" link from the table and bind to 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.

以下是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>

到目前为止我的jQuery：

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);

推荐答案

继续使用您当前的代码：

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);

注释

• 使用CSS类而不是ID - 只有这样你才能在一个页面上拥有多个可编辑网格


• 使用 bind（）没有任何好处过度使用 click（） here


• 您可以直接将函数作为参数传递 - 无需定义它们单独


• 它可以提高可读性/清晰度以使用详细选择器（a.add_row优于。add_row）


• 在外部函数中，这个指的是一个包含<的jQuery对象em>所有匹配的元素，所以 click（）一步将所有这些绑定。


• 在内部函数中，这个指的是一个单独的DOM元素（即点击的链接） - 这里不是一个jQuery对象！


• 不要忘记从点击函数返回 false 以防止浏览器默认行为


• 使用 $ 预先添加变量以表示它们包含jQuery对象很有用

• 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 using click() 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, so click() 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 the click function to prevent the browser default behavior
• it's useful to prepend variables with a $ to denote that they contain a jQuery object

这篇关于使用jQuery向表添加行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！