Прототип преобразования jQuery - Stuck

Question

Я пытался конвертировать некоторый код прототипа, который у меня должен быть jQuery, я немного искал Google и нашел несколько вещей, но этот последний сегмент кода, с которым я борюсь.

Надеюсь, кто-то здесь может пролить некоторый свет на то, что я делаю неправильно ....

Это код прототип, который я пытаюсь преобразовать в 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 файл сценария:

// 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()); 
    }); 
});