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

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

javascript jquery html css

Javascript jQuery将文本框的内容放入div中,javascript,jquery,html,css,textbox,Javascript,Jquery,Html,Css,Textbox,这是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/javas

这是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{padding:4px；}
$（文件）。准备好了吗(
函数（）{
var计数器=2；
$（'a.add'）.live（'click'，function（））{
如果（计数器>5）{
警报（“仅允许5个文本框”）；
返回false；
}
var newRow=
$（this）.clone（'tr'）.clone（）.appendTo（'gridInAnswers'）.find（'input'）.val（''）；
var i=0；
$（'#gridInAnswers input'）。每个（函数（）{
$（this.attr（“id”，“Col”+（i++））；
});
$（this）.text（'Remove'）.removeClass（'add'）.addClass（'Remove'）；
计数器++；
});
$（'a.remove'）.live（'click'，function（））{
$（this）.closest（'tr'）.remove（）；
计数器--；
var i=0；
$（'#gridInAnswers input'）。每个（函数（）{
$（this.attr（“id”，“Col”+（i++））；
});
});
$（“#getButtonValue”）。单击（函数（）{
var检验=''；
对于（变量i=0；i最大值））{
警报（‘警报…’）；
}
}
var gridInAnswerValuesHtml=“”；
$（“.grdAns”）。每个（函数（）{
//ansString+=此.value+“，”；
GridInSwerValuesHTML+=“”；
});
警报（GridinaSwerValuesHTML）；
});
});
最小值
最大值

单击“添加”按钮后，我想删除文本框，但其内容应显示在div中。即，我想阻止用户修改此内容，但禁用文本框不是一个选项。如何实现这一点？

要从

获取内容并将其放置在

中，您需要以下内容：

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

我有理由相信这就是您要做的。

要从

获取内容并将其放置在

中，您需要以下内容：

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

我有理由相信这就是您要做的。

基本上，您需要做的是在单击

添加链接后立即进行替换。更换非常简单
// Do the magic here (Kuroir)
$(this).parent().parent().find('input').each(function(){
    $(this).replaceWith('<div class="inactive">' + $(this).val() + '</div>');
});

//在这里施展魔法（Kuroir）
$（this）.parent（）.parent（）.find（'input'）.each（function（））{
$（this.replacetwith（“”+$（this.val（）+“”）；
});

基本上，您将返回到tr
级别，然后查找输入并替换该行
工作解决方案：
基本上，您需要做的是在单击add
链接后立即进行替换。更换非常简单
// Do the magic here (Kuroir)
$(this).parent().parent().find('input').each(function(){
    $(this).replaceWith('<div class="inactive">' + $(this).val() + '</div>');
});

//在这里施展魔法（Kuroir）
$（this）.parent（）.parent（）.find（'input'）.each（function（））{
$（this.replacetwith（“”+$（this.val（）+“”）；
});

基本上，您将返回到tr
级别，然后查找输入并替换该行
工作解决方案：
使用您的代码解决。我建议你下次再多提一点你的问题，多说几句；起初有点混乱，直到我看到你的例子。用你的代码解决了。我建议你下次再多提一点你的问题，多说几句；起初有点困惑，直到我看到你的例子。