Question

我一直在努力将一些原型代码转换为jQuery，我已经做了一些环顾谷歌并找到了一些东西，但最后一段代码我正在努力。

希望有人在这里能够解释我做错了什么......

这是我试图转换为jQuery的原型代码：

<script type="text/javascript">
var catCounter = 0;
function addCategory(catId) {
    var cell;
    var row = $('showcategories').insertRow(0);

    if (!catId) {
        catId = $F('category');
    }

    row.id = 'showcategory'+catCounter;

    cell = row.insertCell(0);
    cell.innerHTML = $('catoption'+catId).text;

    cell = row.insertCell(1);
    cell.innerHTML = '<input type="hidden" name="categories[]" value="'+catId+'">';
    cell.innerHTML += '<input type="button" value="Remove" onclick="removeCategory('+catCounter+'); return false;">'
    catCounter++;
}

function removeCategory(catId) {
    $('showcategories').deleteRow($('showcategory'+catId).rowIndex);
}
</script>

提前感谢您的帮助。

Answer 1

您永远不需要隐藏您的javascript：

function addCategory(catId) {
    var cell;
    var row = $('#showcategories').insertRow(0); //# used to idenitfy IDs

    if (!catId) {
        catId = $('#category'); //same here, just use an ID, not a form element name
    }

    row.id = 'showcategory'+catCounter;

    cell = row.insertCell(0);

    //it's faster to build a string than updating the DOM repeatedly
    var output = = $('#catoption'+catId).text;

    cell = row.insertCell(1);
    output  = '<input type="hidden" name="categories[]" value="'+catId+'">';
    output  += '<input type="button" value="Remove" onclick="removeCategory('+catCounter+'); return false;">'
    cell.html(output)
    catCounter++;
}

function removeCategory(catId) {
    $('#showcategories').deleteRow($('#showcategory'+catId).rowIndex);
}

Answer 2

如果您想要更流畅的方法：jsFiddle code

插件脚本文件：

// Plugin Code (maybe name it jquery-addCategory.js and include it?)
;(function($){

  var catCounter = 0;
  $.fn.extend({
    addCategory: function(catId){
      if (!catId) var catId = $F('category'); // assume $F is a form element value?

      // use return so we can continue chaining
      return this.each(function(){
        var rowId = 'showcategory'+catCounter;

        // I assume catoption[N] is an element with that ID attribute
        // thus my use of '#' prefix for jQuery
        var cell1 = $('<td>').append($('#catoption'+catId).text());
        var cell2 = $('<td>')
          .append($('<input>').attr({
            'type':'hidden',
            'name':'categories[]',
            'value':catId
          })).append($('<input>').attr({
            'type':'button',
            'value':'Remove',
          }).click(function(){
            $(this).closest('tr').remove();
          }));

        // build the row from the cells above and append it
        var row = $('<tr>').append(cell1).append(cell2);
        $(this).append(row);

        // increase your counter
        catCounter++;
      });
    }
  });

})(jQuery);

用法：

// the code that goes in your document (#myTable is the table you're attaching the
// the new row on to)
$(function(){
    $('#addRow').click(function(){
        $('#myTable').addCategory($('#category').val());
    });
});

jQuery转换的原型 - 坚持

2 个答案: