Как добавить уже созданную форму html в таблицу с помощью раскрывающегося списка javascript? - PullRequest
Новая
       0

Как добавить уже созданную форму html в таблицу с помощью раскрывающегося списка javascript?

0 голосов
/ 08 мая 2020

Я создал раскрывающийся список со значениями от 1 до 6 (нужно добавить больше). В этом html я создал пустую таблицу и форму.

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

, и когда я выбираю значение 2, форма со значением 2 должна быть добавлена, а не какое-либо другое видимый 

<!DOCTYPE html>
    <html lang="en">
    <head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
    </head>
    <body>
	<table border ="1" align='center'>
		<tr>

		   <td>
			  <select id="colors" onchange="changedesc()">
				 <option value="1">Desc1</option>
				 <option value="2">Desc2</option>
				 <option value="3" >Desc3</option>
				 <option value="4">Desc4</option>
				 <option value="5">Desc5</option>
				 <option value="6" >Desc6</option>
			  </select>
		   </td>

		</tr>
	 </table>

	 <table id ="addform">

		<!-- to be inserted here the div-->
	 </table>

		<form id=1 style="visibility: hidden;">
				<input type="text">
				<textarea>abc</textarea>
			</form>
		<form id=2 style="visibility: hidden;">
				<input type="text">
				<input type="checkbo">
		</form>
		

	 </div>

	 <script>
		 function changedesc(){
		 var eID = document.getElementById("colors");
		 var colorVal = eID.options[eID.selectedIndex].value
		 if (colorVal=="1"){
			var frm = document.getElementById(1);
			frm.removeAttribute("style");
			var ff = document.getElementById("addform")
			ff.appendChild(frm);
			
		 }
		 if (colorVal=="2"){
			var frm = document.getElementById(2);
			frm.removeAttribute("style");
			var ff = document.getElementById("addform")
			ff.appendChild(frm);
			//how to remove previuos one
		 }
		}
	 </script>
</body>
</html>

1 Ответ

1 голос
/ 08 мая 2020

Несколько моментов, которые следует упомянуть здесь:

  • в вашем фрагменте есть закрывающий тег </div>, это приведет к недопустимому HTML.
  • у вас есть таблица с одна ячейка, содержащая кнопку выбора, я предлагаю вам использовать <div>, поскольку таблица предназначена для отображения данных, которые должны быть просмотрены в виде таблицы.
  • у вас есть другая таблица без <tr> , <td> и добавление тега формы к id без тегов <tr>, <td> будет недействительным HTML и приведет к тому, что HTML не будет отображаться.
  • скрытые формы используют id атрибут 1 и 2, хотя он анализируется и распознается браузером, я предлагаю вам использовать более значимые идентификаторы.

  • последнее предложение - использовать display / visibility / opacity атрибуты для переключения отображения / скрытия форм вместо добавления их сюда.

    Вот фрагмент с рабочим HTML из вашего фрагмента: 

function changedesc(){
 var eID = document.getElementById("colors");
 var colorVal = eID.options[eID.selectedIndex].value
 if (colorVal=="1"){
  var frm = document.getElementById(1).cloneNode(true);
  console.log(frm);
  frm.id="new-form1"
  frm.removeAttribute("style");
  var ff = document.getElementById("form-td");
  ff.innerHTML = "";
  ff.appendChild(frm);

 }
 if (colorVal=="2"){
  var frm = document.getElementById(2).cloneNode(true);
  frm.id="new-form2"
  frm.removeAttribute("style");
  var ff = document.getElementById("form-td")
  ff.innerHTML = "";
  ff.appendChild(frm);
  //how to remove previuos one
 }
}
<!DOCTYPE html>
    <html lang="en">
    <head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
    </head>
    <body>
	<table border ="1" align='center'>
		<tr>

		   <td>
			  <select id="colors" onchange="changedesc()">
				 <option value="1">Desc1</option>
				 <option value="2">Desc2</option>
				 <option value="3" >Desc3</option>
				 <option value="4">Desc4</option>
				 <option value="5">Desc5</option>
				 <option value="6" >Desc6</option>
			  </select>
		   </td>

		</tr>
	 </table>

	 <table id ="addform">
    <tr>
      <td id="form-td"></td>
    </tr>
		<!-- to be inserted here the div-->
	 </table>

		<form id=1 style="visibility: hidden;">
				<input type="text">
				<textarea>abc</textarea>
			</form>
		<form id=2 style="visibility: hidden;">
				<input type="text">
				<input type="checkbo">
		</form>
	 <script>
		 
	 </script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...