преобразование элементов формы (входных данных) в div

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/

Обновлено, чтобы включить копирование содержимого в другой div с лайтбоксом ID.

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, удаления текущего child и затем добавления вашего 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" />