Создание колонок таблицы через jQuery
При вводе значения в поле ( цифры от 1 до 100 ) должны создаваться колонки таблицы с полями <input>.
Если мы, в первый раз ввели 30, то создастся 30 колонок с <input>, в каждой ячейке.
Если, во второй раз мы введем 20, то значения <input> в первых 20 колонках сохраняются, а след. 10 колонок убираются и значения их <input> обнуляются.
И у каждого <input> должны быть уникальные класс, к примеру, у первого - col1, у второго - col2.
Не совсем понятно что имеется в виду
10 колонок убираются и значения их обнуляются.
Если колонки удаляются, то инпуты, которые были в колонках, удаляется вместе с ними. Вот примерный код:
$('input').on('change', function () {
updateTable(this.value | 0);
});
function updateTable(columnsCount) {
var $table = $('table');
var $columns = $table.find('td');
for (var i = $columns.length; i-- > columnsCount;) {
$columns[i].remove();
$columns.length--;
}
for (var i = $columns.length; i <= columnsCount; i++) {
//добавление колонок в $table соответствии с шаблоном
}
}В итоге сам додумался до такого:
var x = 0;
function input() {
if(x > $("#input").val()){
for (var j = x; j > $("#input").val(); j--){
k = j-1;
$(".el"+k).remove();
$(".el"+k).remove();
}
x = j;
}
else if (x < $("#input").val()){
for (var i = x; i < $("#input").val(); i++) {
$('.channel_numbber').append('<td class="el'+i+'"><input class="col1_'+i+'"></td>');
$('.frequency_minAndMax').append('<td class="el'+i+'"><input class="col2_'+i+'"></td>');
}
x = i;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.container{
width: auto;
overflow: scroll;
}
.slova{
width: 300px;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="input" onblur="input()">
<table id="myTable">
<tr class="channel_numbber">
<td>
<label for="" class="slova">X</label>
</td>
</tr>
<tr class="frequency_minAndMax">
<td>
<label for="" class="slova">Y</label>
</td>
</tr>
</table>
</div>
</body>
</html>Есть идеи по оптимизации или этот код венец творения?))
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
- Почему SERVER_ADDR имеет не тот IP 47912 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30567 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23899 visits
- Как через css изменить цвет png изображения? 10400 visits
- Blob video url download 10004 visits
- Php curl запрос через прокси с авторизацией 9278 visits
- Работа с captcha vk api 8147 visits
© "hostciti.net" 25.3.2025 | 13:14