Блог

Главная - Вопросы по программированию - jQuery помещает содержимое текстового поля внутри div

jQuery помещает содержимое текстового поля внутри div

#javascript #jquery #html #css #textbox

#javascript #jquery #HTML #css #текстовое поле

Вопрос:

Это 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=='' amp;amp; maxValue !='')||(minValue!='' amp;amp; maxValue !='' amp;amp; 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. т. Е. я хочу запретить пользователю изменять это, но отключить текстовое поле не вариант. Как мне этого добиться?

Комментарии:

1. Решается с использованием вашего кода. Я советую вам в следующий раз немного расширить пространство вашего вопроса и сформулировать его немного подробнее; сначала это немного сбивало с толку, пока я не увидел ваш пример.

Ответ №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 /

Ответ №2:

Чтобы получить содержимое из <input> и поместить его в <div> , вам нужно что-то вроде:

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

Я достаточно уверен, что это то, что вы пытаетесь сделать.