Блог

Я пытаюсь создать инструмент, который обновит некоторый html, предоставленный пользователем в элементе формы textarea. Я хочу, чтобы пользователь предоставил хорошо отформатированную 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-дерево из строки в элементе form, затем манипулировать этим созданным DOM-деревом и возвращать его пользователю.

Из того, что я могу сказать, это то, что вы ищете:

 rowData.innerHTML = ($("#rowData").val());
  

С помощью этого

 $('#rowform').append($("#rowData").val());