I'm trying to create a tool that will update some html provided by the user in a textarea form element. I want the user to provide a well-formatted html table, the rows of which may have classes to denote odd or even rows. I want to remove any existing classes and add back appropriate odd/even classes.
Form element:
<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>
Here's where I am in my attempt at retrieving and manipulating the text. This is what doesn't work, but I hope someone will understand what I'm going for:
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;
}
What I can't find in my research is how to create a DOM tree from the string in the form element, then manipulate that constructed DOM tree, and get it back to the user.
