セル内の文字数を制限する方法​​jqueryを使用して

Question

jQueryを使用してテーブルのセル内の文字数を制限する方法を理解しようとしています。私はテキストボックスの文字を制限する方法を見つけましたが、それは機能しません。前もって感謝します。下に示すコードは、テーブルの新しい行を作り、30文字に制限するために何をしようとしているのか、そして現在のように見せます。

jQueryの

let category = $("#categoryNameInsert"); 
let weight = $("#weightInsert"); 
$("#categoryInsertButton").click(function(){ 
    let markup2 = "<tr><td contenteditable=\"true\" class=\"categoryName\"></td><td contenteditable=\"true\" class=\"gradeName\"></td><td>Click to edit</td></tr>"; 
    $("#addCategoryTable").append(markup2); 
}); 
$(document).ready(function() { 
    $('categoryName').each(function() { 
     let td = $(this); 
     td.text(td.text().substring(0, 50)); 
     }); 
    }); 
}); 

Htmlのそれはあなたが新しい空の行がポップアップ表示され、その行にあなたがセルを編集することができますし、それは私は何カテゴリを追加押したときにどのように見えるか

<div id="addCategory" 
    <h5 id="addCategoryHeader">Add a grade category</h5> 
    <table id="addCategoryTable"> 
    <tr> 
    <th>Category</th> 
    <th>Weight(%)</th> 
    <th><button id="categoryInsertButton">Add Category</button></th> 
    </tr> 
    </table> 
</div> 

の文字を制限しようとしています。 Image of problem table Another image of problem

Answer 1

それは$('categoryName')ではないですが、$('.categoryName')。名前の前に点があることに注目してください。これはclassであることが通知されます。 .each()は間違ったセレクタを使用したため、何にも適用できませんでした。