将表单元素（输入）转换为 div

发布于 2024-10-23 16:09:30 字数 964 浏览 3 评论 0原文

有没有办法将所有输入字段转换为div？或跨度或任何东西。我有一个像这样的表：

<div id="calc">
<table>
<tr>
<td>Principal:</td>
<td><input value="100.00$" /></td>
</tr>
<tr>
<td>start date:</td>
<td><input value="02/02/2002" /></td>
</tr>
<tr>
<td>end date:</td>
<td><input value="02/02/2002" /></td>
</tr>
</table>
</div>

我想将此源复制到没有输入的灯箱..例如：

<table>
<tr>
<td>Principal:</td>
<td><div>100.00$</div></td>
</tr>
<tr>
<td>start date:</td>
<td><div>02/02/2002</div></td>
</tr>
<tr>
<td>end date:</td>
<td><div>02/02/2002</div></td>
</tr>
</table>

我想知道是否有一种方法可以通过使用 .replace 或其他方式将所有这些输入转换为 div别的？

谢谢

原文

is there a way to transform all inputs field to divs? or span or anything.
i have a table like:

<div id="calc">
<table>
<tr>
<td>Principal:</td>
<td><input value="100.00$" /></td>
</tr>
<tr>
<td>start date:</td>
<td><input value="02/02/2002" /></td>
</tr>
<tr>
<td>end date:</td>
<td><input value="02/02/2002" /></td>
</tr>
</table>
</div>

and i want copy this source to a light box without inputs.. like:

<table>
<tr>
<td>Principal:</td>
<td><div>100.00lt;/div></td>
</tr>
<tr>
<td>start date:</td>
<td><div>02/02/2002</div></td>
</tr>
<tr>
<td>end date:</td>
<td><div>02/02/2002</div></td>
</tr>
</table>

i wonder is there a way to convert all those inputs to divs may be via using .replace or something else ?

thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

他不在意 2024-10-30 16:09:30

试试这个：

$('#calc').clone().appendTo('#lightbox');
$('#lightbox input').replaceWith(function() {
    return $('<div>' + $(this).val() + '</div>');
});

jsfiddle - http://jsfiddle.net/infernalbadger/c9Rub/2/

已更新包括将内容复制到带有 ID lightbox 的另一个 div。

Try this:

$('#calc').clone().appendTo('#lightbox');
$('#lightbox input').replaceWith(function() {
    return $('<div>' + $(this).val() + '</div>');
});

jsfiddle - http://jsfiddle.net/infernalbadger/c9Rub/2/

Updated to include copying the content to another div with the ID lightbox.

回复收藏 0 原文

同展鸳鸯锦 2024-10-30 16:09:30

假设您没有使用任何库：

这里 http://www.w3schools.com/jsref/dom_obj_all .asp，您可以找到一些有用的函数来执行此操作。

通过获取您需要的输入元素，如下所示：

var inputs = document.getElementsByTagName('input');

您可以用以下内容替换它们：

  //pseudo
  for each input element
    var parentNode = input.parentNode;
    parentNode.removeChild(input);
    parentNode.innerHTML('<div>' + input.value + '</div>');

在我上面放置的链接中，您可以找到一些函数来替换子项或查找父项，删除当前子项，然后附加您的自己div。

Assuming that you are not using any libs:

Here http://www.w3schools.com/jsref/dom_obj_all.asp, you can find some useful functions to do this.

By getting the input elements that you need, something like this:

var inputs = document.getElementsByTagName('input');

You can replace them with this:

  //pseudo
  for each input element
    var parentNode = input.parentNode;
    parentNode.removeChild(input);
    parentNode.innerHTML('<div>' + input.value + '</div>');

In the link that I put above, you can find some functions either to replace child or either to findParent, remove the current child and then append your div by yourself.

回复收藏 0 原文

朱染 2024-10-30 16:09:30

如果您使用jquery，您可以执行以下操作。

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#btnChange").click(function () {
            $("#calc :input").each(function () {
                this.outerHTML = "<div>" + this.value+ "</div>";
            });
        });
    });
</script>

<div id="calc">
<table>
<tr>
<td>Principal:</td>
<td><input value="100.00$" /></td>
</tr>
<tr>
<td>start date:</td>
<td><input value="02/02/2002" /></td>
</tr>
<tr>
<td>end date:</td>
<td><input value="02/02/2002" /></td>
</tr>
</table>
</div>
<input type="button" id="btnChange" value="Change" />

If you are using jquery you can do the following.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#btnChange").click(function () {
            $("#calc :input").each(function () {
                this.outerHTML = "<div>" + this.value+ "</div>";
            });
        });
    });
</script>

<div id="calc">
<table>
<tr>
<td>Principal:</td>
<td><input value="100.00$" /></td>
</tr>
<tr>
<td>start date:</td>
<td><input value="02/02/2002" /></td>
</tr>
<tr>
<td>end date:</td>
<td><input value="02/02/2002" /></td>
</tr>
</table>
</div>
<input type="button" id="btnChange" value="Change" />

回复收藏 0 原文

~没有更多了~