Форум

visajack · #1 (**permalink**) 24.09.2016, 12:45

Всем привет. Не силён в js, потому для реализации своей задачи (добавление строки в таблицу) надыбал на просторах интернета следующий скрипт:

<script>
var c=0; //счётчик количества строк
function addline()
{
	c++; // увеличиваем счётчик строк
	s=document.getElementById('table').innerHTML; // получаем HTML-код таблицы
	s=s.replace(/[\r\n]/g,''); // вырезаем все символы перевода строк
	re=/(.*)(<tr id=.*>)(<\/table>)/gi; 
                // это регулярное выражение позволяет выделить последнюю строку таблицы
	s1=s.replace(re,'$2'); // получаем HTML-код последней строки таблицы
	s2=s1.replace(/\[\d+\]/gi,'['+c+']'); // заменяем все цифры к квадратных скобках
                // на номер новой строки
	s2=s2.replace(/(rmline\()(\d+\))/gi,'$1'+c+')');
                // заменяем аргумент функции rmline на номер новой строки
	s=s.replace(re,'$1$2'+s2+'$3');
                // создаём HTML-код с добавленным кодом новой строки
	document.getElementById('table').innerHTML=s;
                // возвращаем результат на место исходной таблицы
	return false; // чтобы не происходил переход по ссылке
}
function rmline(q)
{
                 if (c==0) return false; else c--;
                // если раскомментировать предыдущую строчку, то последний (единственный) 
                // элемент удалить будет нельзя.
	s=document.getElementById('table').innerHTML;
	s=s.replace(/[\r\n]/g,'');
	re=new RegExp('<tr id="?newline"? nomer="?\\['+q+'.*?<\\/tr>','gi');
                // это регулярное выражение позволяет выделить строку таблицы с заданным номером
	s=s.replace(re,'');
                // заменяем её на пустое место
	document.getElementById('table').innerHTML=s;
	return false;
}
</script>

Сама форма:

<form>
	<span id="table">
		<table border=1 cellspacing=0 cellpadding=3>
			<tr>
				<td>Поле раз</td>
				<td>Поле два</td>
				<td>Поле три</td>
				<td><a href="#" onclick="return addline();"><span style="color:red; font-size:36px; text-align:center;">+</span></a></td>
			</tr>
			<tr id="newline" nomer="[0]">
				<td><input type="text" name="field1[0]" style="width: 50px;"></td>
				<td><input type="text" name="field2[0]" style="width: 50px;"></td>
				<td><input type="text" name="field3[0]" style="width: 50px;"></td>
				<td valign="top"><a href="#" onclick="return rmline(0);">удалить</a></td>
			</tr>
		</table>
	</span>
	<input type="submit">
</form>

Все работает, строки добавляются по нажатию "+", но с одним неприятным деффектом - стираются уже заполненные поля.
Т.е. нажав "+" в данной форме: http://prntscr.com/clqopm
Получу следующее: http://prntscr.com/clqovj
Помогите побороть это недоразумение.
Заранее спасибо.

laimas · #2 (**permalink**) 24.09.2016, 13:53

Таблицу в span уже плохо. Рег. выражения тут лишнее. Стили из тегов убрать. Не надо ни каких номеров полям, индексы будет проставлены автоматически согласно порядку полей в форме. На jQuery:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
#tbl {
    border-collapse: collapse;
}

#tbl td {
    border: 1px solid #ddd;
    padding: 4px;
}

#tbl input {
    width: 50px;
}

a.delRow, #addRow {
    display: block;
    cursor: pointer;
}

</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script> 
$(function() {
    $('#addRow').click(function() {
        var t = $('#tbl');
        t.find('tr')
         .eq(1)
         .clone()
         .appendTo(t)
         .find('td:last')
         .append('<a class="delRow">удалить</a>')
         .end()
         .find('input')
         .val('');
    });
    
    $('#tbl').on('click', 'a.delRow', function() {
        $(this).closest('tr').remove(); 
    });
});
</script>     
</head> 

<body>
<form>
        <table id="tbl">
            <tr>
                <td>Поле раз</td>
                <td>Поле два</td>
                <td>Поле три</td>
                <td><a id="addRow">+</a></td>
            </tr>
            <tr>
                <td><input type="text" name="field1[]" /></td>
                <td><input type="text" name="field2[]" /></td>
                <td><input type="text" name="field3[]" /></td>
                <td></td>
            </tr>
        </table>
    <input type="submit"/>
</form>
</body> 
</html>

warren buffet · #3 (**permalink**) 24.09.2016, 14:03

Сообщение от visajack

для реализации своей задачи (добавление строки в таблицу)

Это не задача, а реализация. Ты хочешь реализацию реализации, или какова задача?

visajack · #4 (**permalink**) 24.09.2016, 14:48

laimas, огромное спасибо за код.
В приведенном примере поля input были для примера, в реальности использую так же textarea.
Изменил чутка скрипт:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script> 
$(function() {
    $('#addRow').click(function() {
        var t = $('#tbl');
        t.find('tr')
         .eq(1)
         .clone()
         .appendTo(t)
         .find('td:last')
         .append('<a class="delRow">удалить</a>')
         .end()
         .find('textarea')
         .val('')
		 .end()
		 .find('input')
         .val('');
    });
    
    $('#tbl').on('click', 'a.delRow', function() {
        $(this).closest('tr').remove(); 
    });
});
</script>

Всё работает великолепно.
Ещё раз огромное спасибо.

2 warren buffet
Изначальная ЗАДАЧА была в создании динамической формы ибо количество полей неизвестно. Реализацию ЗАДАЧИ нашёл в интернете, но возникли сложности описанные в первом посте.
Потому потребовалась помощь в реализации изменений в готовой реализации изначально поставленной задачи. Что, само по себе, и является задачей. Не?

laimas · #5 (**permalink**) 24.09.2016, 16:30

visajack,
таблица все таки для табличных данных, а форматировать элементы в форме можно более легкими средствами. Ищите в сети, там много пример по данному вопросу.

warren buffet · #6 (**permalink**) 24.09.2016, 17:48

visajack, нет таких динамических форм. Твоя задача называется

datagrid

а форма не нужна, поскольку ты все равно используешь жабу скрипучую.

В datagrid поля не размножаются, а просто подставляются в строку, куда юзер щелкнул. Ладно, не важно, посмотри как делают по словам datagrid javascript в гугле.

warren buffet · #7 (**permalink**) 24.09.2016, 17:59

Сообщение от visajack

ибо количество полей неизвестно

Вот потому, что ты не владеешь терминологией, у тебя и такие "задачи". Количество полей одинаковое, поскольку полем в таблице принято считать колонку, при этом у каждого поля может быть свой тип данных. Заранее неизвестно тебе количество строк (рядов), о чем можно было догадаться хотя бы по addRow - добавить ряд.

Datagrid - элемент управления. Управлять можно любыми табличными данными. Если хочешь по 100500 раз не переписывать свою бнопню, колись, что делаешь и может быть оно в 100500-й раз уже сделано и надо просто пойти, скачать и себе приклеить.

Форум

Справочник

Discord чат

Курсы javascript