Добавление строк в таблицу изменяет выбор индекса? - PullRequest
Новая
       0

Добавление строк в таблицу изменяет выбор индекса?

0 голосов
/ 27 сентября 2019

Я добавляю строки в таблицу с помощью java-скрипта, которые содержат элемент <select>, каждый раз, когда в таблицу добавляется новая строка, изменяются выбранные индексы.

Я разбил его на упрощенную форму, чтобы попытаться воссоздать происходящее 

let currentRows = 0;
function addRow() {
	let row = 
	`<tr id="row-${currentRows}">
		<td>
		  <select id="select-${currentRows}">
		     <option>1</option>
		     <option>2</option>
		     <option>3</option>
		</select>
		</td>
	</tr>`;
	console.log(row);
	document.getElementById("myTable-body").innerHTML += row;
	currentRows = currentRows + 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick='addRow()'>Add Row</button>
	<table id="myTable">
	 <tbody id='myTable-body'>
	 </tbody>
	</table>

Я хотел бы, чтобы при добавлении новой строки выбранные индексы оставались на значении, которое они держат, и не все возвращались к значениям по умолчанию для0 или -1

1 Ответ

2 голосов
/ 27 сентября 2019

Попробуйте поиграть с createElement и appendChild методом. 

let currentRows = 0;

function addRow() {
  var tr = document.createElement('tr');
  tr.setAttribute('id', 'row-' + currentRows);
  tr.innerHTML =
    `<td>
        <select id="select-${currentRows}">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
    </td>`;
  document.getElementById("myTable-body").appendChild(tr);
  currentRows = currentRows + 1;
}
<!DOCTYPE html>
<html>

<body>
  <button onclick='addRow()'>Add Row</button>
  <table id="myTable">
    <tbody id='myTable-body'>
    </tbody>
  </table>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...