jQuery:获取 html 作为用户输入,更新它,并将更新后的 html 返回给用户

发布于 2024-11-01 16:31:10 字数 940 浏览 3 评论 0原文

我正在尝试创建一个工具来更新用户在文本区域表单元素中提供的一些 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

八巷 2024-11-08 16:31:10

据我所知,这就是您所寻找的:

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

有了这个

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

From what I can tell this is what your looking for:

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

With this one

$('#rowform').append($("#rowData").val());
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文