原型到jQuery转换 - 卡住

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