jQuery将文本框的内容放入div中

Question

这是html标记

<head>
    <script type="text/javascript" src="jquery-1.4.2.min.js">
    </script>
    <style type="text/css">
        div{ padding:4px; }
    </style>
</head>

<body>
    <script type="text/javascript">
        $(document).ready(

        function() {
            var counter = 2;
            $('a.add').live('click', function() {
                if (counter > 5) {
                    alert("Only 5 textboxes allowed");
                    return false;
                }
                var newRow =
                $(this).closest('tr').clone().appendTo('#gridInAnswers').find('input').val('');

                var i = 0;
                $('#gridInAnswers input').each(function() {
                    $(this).attr("id", "Col"+ (i++));

                });

                $(this).text('Remove').removeClass('add').addClass('remove');
                counter++;
            });
            $('a.remove').live('click', function() {
                $(this).closest('tr').remove();
                counter--;
                var i=0;
                 $('#gridInAnswers input').each(function() {
                    $(this).attr("id", "Col"+ (i++));

                });
            });
               $("#getButtonValue").click(function() {
               var test='';
               for(var i=0;i<5;i++){
                   var minValue = $('#Col'+(i++)).val().trim();
                   var maxValue = $('#Col'+i).val().trim();

                   if((minValue=='' && maxValue !='')||(minValue!='' && maxValue !='' && minValue > maxValue)){
                    alert('Alerting...');
                    }
                }




                var gridInAnswerValuesHtml = "";
                $(".grdAns").each(function() {
                    //ansString += this.value+",";
                    gridInAnswerValuesHtml += "<input type = \"hidden\" name = \"gridInAnswers\" value = \"";
                    gridInAnswerValuesHtml += this.value;
                    gridInAnswerValuesHtml += "\">";
                });
                alert(gridInAnswerValuesHtml);

            });


        });
    </script>
    </head>

    <body>
    <div id="blankDiv"></div>
        <table id="gridInAnswers">
            <tr>
                <th>
                    Min Value
                </th>
                <th>
                    Max Value
                </th>
            </tr>
            <tr>
                <td>
                    <input type="text" name="col1" id="Col0" class="grdAns" />
                </td>
                <td>
                    <input type="text" name="col1" id="Col1" class="grdAns" />
                </td>
                <td>
                    <a href="#" class="add">Add</a>
                </td>
            </tr>
            <tr>
                <input type='button' value='Get TextBox Value' id='getButtonValue'>
            </tr>
        </table>
    </body>

在单击添加按钮时，我想删除文本框，但是它的内容应该在div中显示出来。 即我想阻止用户修改它，但是禁用文本框不是一种选择。 我该如何实现？

Answer 1

基本上，您需要做的就是单击add链接后立即进行替换。 更换真的很简单。

// Do the magic here (Kuroir)
$(this).parent().parent().find('input').each(function(){
    $(this).replaceWith('<div class="inactive">' + $(this).val() + '</div>');
});

基本上，您要回到tr级别，然后查找输入并对该行进行替换。

工作解决方案： http : //jsfiddle.net/kuroir/SXppg/

Answer 2

要从<input>获取内容并将其放置在<div> ，您需要以下内容：

$('#target-div-id').text(    
    $('#Col0').val()
);

我有理由确定这就是您要尝试的方法。