ユーザーがテキストエリアフォーム要素で提供したHTMLを更新するツールを作成しようとしています。ユーザーに整形式の html テーブルを提供してもらいたいのですが、その行には、奇数行または偶数行を示すクラスが含まれている場合があります。既存のクラスをすべて削除し、適切な奇数/偶数クラスを追加したいと考えています。
フォーム要素:
<div id="rowform">
<p>Enter the table code you have here. Click submit to have the even/odd class attributes updated.</p>
<form onsubmit="return updateRowClass()">
<textarea name="rowData" id="rowData" cols="100" rows="20"></textarea>
<br><br><input type="submit" value="Submit table code">
<form>
</div>
ここで、テキストを取得して操作しようとしています。これは機能しませんが、誰かが私が何をしようとしているのかを理解してくれることを願っています:
function updateRowClass(){
var rowData = document.createElement("div");
rowData.innerHTML = ($("#rowData").val());
var trOdd = $("tr:odd" , rowData.innerHTML).removeClass().addClass("odd");
var trEven = $("tr:even" , rowData.innerHTML).removeClass().addClass("even");
return false;
}
私の研究で見つけられないのは、フォーム要素の文字列から DOM ツリーを作成し、その構築された DOM ツリーを操作して、ユーザーに戻す方法です。