Member 13562560 Ответов: 2

Мне нужна динамическая таблица, в которой строки должны быть добавлены пользовательским значением ввода в текстовое поле без использования кнопки


мне нужна динамическая таблица в html, а также текстовое поле о таблице, значение по умолчанию таблицы равно 1, поэтому initaily при загрузке страницы будет таблица, содержащая заголовок и одну строку, а когда пользователь вводит числовое значение в текстовое поле, то автоматически увеличивается или уменьшается строка на основе этого значения.

Что я уже пробовал:

<pre>$(document).ready(function(){

   $('.input').on('keyup', function(){
       $val = $(this).val();
       $('.tbl').find('tr').remove();
      if($.isNumeric($val)==true){
        
        while($val!=0){
            $('.tbl').append("<tr><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr>");
            $val--;
        }
      }
       
   });
    
});



    
    
       
        
    <table class="tbl"></table>

Karthik_Mahalingam

что вы хотите отобразить в строках?
цифры ?

Member 13562560

в строках просто нужно поле ввода,мне нужно 4 столбца в таблице sno,имя,возраст,цена, поэтому изначально, когда мы открываем страницу, она содержит текстовое поле, а под ним таблицу со всеми вышеперечисленными заголовками, а также одну строку(значение по умолчанию строки равно 1), когда пользователь вводит числовое значение в текстовое поле, строка увеличивается, т. е. если введено значение 2, то количество строк будет равно 2, а затем снова 1 вводится в текстовое поле, строка уменьшается на 1.

Karthik_Mahalingam

хорошо, но что вы будете отображать внутри строк?

Member 13562560

внутри строки мы введем данные о каждом человеке,такие как имя,возраст, amt или цена.

Karthik_Mahalingam

значит, каждая строка будет содержать текстовое поле?

Member 13562560

да,каждая строка имеет 4 поля ввода для sno,имени,возраста,цены .это просто ввод значений в таблицу,для этого нам нужно поле ввода.

Karthik_Mahalingam

ладно.

2 Ответов

Рейтинг:
2

Karthik_Mahalingam

пробовать

<!doctype html>
<html>
<head> 
</head>
<body>
    <input id="txtCount" type="text" value="1"  onchange="generate(this)"/>
    <table id="tbl">
        <thead>
            <tr>
                <th>Column1</th><th>Column2</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <script>
        function generate() {
           var value =  document.getElementById('txtCount').value;
            if (!isNaN(value)) {
                var rows = parseInt(value);
                var trs = [];
                for (var i = 0; i < rows; i++) {
                    trs.push('<tr> <td> <input type="text" /> </td>   <td> <input type="text" /> </td>   </tr> ')
                }
                var tbodyHtml = trs.join('');
                var tbody = document.querySelector('#tbl tbody');

                tbody.innerHTML = tbodyHtml;

            }
        }
        generate();
    </script>


   
</body>
</html>


Member 13562560

Этот код прекрасен,но есть небольшая поправка, что в этом случае, когда пользователь вводит значение в текстовое поле, хочет нажать кнопку enter, то генерируется только строка, но мне нужно, когда пользователь вводит значение в текстовое поле(без нажатия какой-либо клавиши на клавиатуре), и в это время сама строка генерируется .

Member 13562560

у меня есть изменения,там вместо onChange, после чего хотите использовать oninput, то она будет работать extactly такое.большое вам спасибо.

Karthik_Mahalingam

добро пожаловать.

Member 13562560

мне нужна небольшая коррекция в этом коде,т. е. в этом, когда пользователь вводит 2 в текстовое поле и вводит детали в строку, и если пользователь хочет еще одну строку, то пользователь введет 3 в текстовое поле, то все ранее введенные значения исчезнут и появятся три новые строки, но мне нужно, чтобы когда пользователь вводит 2 в текстовое поле, то 2 строки будут генерироваться после ввода значений в строке, если пользователю нужно снова 1 или 2 строки, то он введет 3 или 4 в текстовое поле, то новые хотят генерироваться без исчезновения значений, введенных в вышеуказанные строки.

Karthik_Mahalingam

добавьте новое текстовое поле для добавления новых строк или добавьте кнопки для различения новой таблицы и добавления строк в таблицу.

Member 13562560

не могли бы вы дать мне код для добавления нового текстового поля, потому что я его не получил

Рейтинг:
0

Patrice T

Цитата:
пришлите мне код как можно скорее

Мне срочно нужно выиграть в лотерею.
Мы не являемся сайтом "код на заказ", вы должны попытаться нанять профессионального программиста.
Нанимайте фрилансеров и находите внештатные вакансии онлайн - Freelancer[^]