Question

有没有办法将所有输入字段转换为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>

我想知道有没有办法将所有这些输入转换成div可能是通过使用 .replace 或其他东西？

感谢

Answer 1

试试这个：

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

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

已更新，包括使用ID灯箱将内容复制到另一个div。

Answer 2

假设您没有使用任何库：

在这里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>');

在我上面的链接中，您可以找到一些函数来替换child或者将其替换为findParent，删除当前的子节点然后自己追加div。

Answer 3

如果您使用的是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" />

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

3 个答案: