jQuery:获取 html 作为用户输入,更新它,并将更新后的 html 返回给用户
我正在尝试创建一个工具来更新用户在文本区域表单元素中提供的一些 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树,并将其返回给用户。
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.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
据我所知,这就是您所寻找的:
有了这个
From what I can tell this is what your looking for:
With this one