1

При вводе значения в поле ( цифры от 1 до 100 ) должны создаваться колонки таблицы с полями <input>.

Если мы, в первый раз ввели 30, то создастся 30 колонок с <input>, в каждой ячейке.
Если, во второй раз мы введем 20, то значения <input> в первых 20 колонках сохраняются, а след. 10 колонок убираются и значения их <input> обнуляются.

И у каждого <input> должны быть уникальные класс, к примеру, у первого - col1, у второго - col2.

3
  • 1
    Что значит колонки таблицы? с Уникальными классами? есть для таблицы только tr - строки, и td - поля. ОбЪясните подробно 13 янв 2018 в 11:01
  • Что конкретно не получается то? Покажите ваши наработки .... 13 янв 2018 в 12:03
  • MedvedevDev, я делал через свойство display. Т.е. при вводе значения я сравнивал его в if и отображал нужное кол-во колонок.Но данный метод использовать глупо...
    – Lyavontiy
    13 янв 2018 в 14:12

2 ответа 2

2

Не совсем понятно что имеется в виду

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 соответствии с шаблоном
    }
}
1

В итоге сам додумался до такого:

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>

Есть идеи по оптимизации или этот код венец творения?))

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.