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>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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