将表单元素(输入)转换为div
将表单元素(输入)转换为div
提问于 2011-03-15 16:15:32
是否有办法将所有输入字段转换为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、或其他什么的？
谢谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-03-15 16:20:00
试试这个：
$('#calc').clone().appendTo('#lightbox');
$('#lightbox input').replaceWith(function() {
return $('<div>' + $(this).val() + '</div>');
});jsfiddle - http://jsfiddle.net/infernalbadger/c9Rub/2/
更新以包括将内容复制到另一个带有ID lightbox的div中。
Stack Overflow用户
发布于 2011-03-15 16:26:54
假设您没有使用任何lib：
在这里，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>');在我上面放置的链接中，您可以找到一些函数来替换子函数或findParent函数，删除当前的子函数，然后自己追加div。
Stack Overflow用户
发布于 2011-03-15 16:28:33
如果使用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" />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5314632
复制相关文章
相似问题
腾讯云开发者
