Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.05.2021, 11:07
Аспирант
Отправить личное сообщение для Judgin Посмотреть профиль Найти все сообщения от Judgin
 
Регистрация: 31.05.2021
Сообщений: 32

Cоздание формы динамически
Нужно чтобы динамически создаваемые строки находились в форме. Форма создается каждый раз при создании строки, а должна быть только одна. И находится за пределами таблицы (см. фото). Как это исправить?

<SCRIPT language="javascript">

                  function addRow(tableID) {
                        document.body.appendChild(my_form);
			var table = document.getElementById(tableID);
			var rowCount = table.rows.length;
			var row = table.insertRow(rowCount);
			
                        my_form=document.createElement('FORM');
			my_form.name='myForm';
			my_form.method='POST';
			my_form.action='insert_data_to_db.php';
			
		for(let i=0; i<13; i++){
			var cell0 = row.insertCell(0);
			var element0 = document.createElement("input");
			element0.type = "text"+i;
			element0.name = "name"+i;
			element0.id = "input";
			cell0.appendChild(element0);


			// var element1 = document.createElement("form");
			// element1.setAttribute("method","post");
			// element1.setAttribute ("action", "insert_data_to_db.php");
			// appendChild(element1);

}
            }	

                function deleteRow(tableID) {
			document.getElementById("dataTable").deleteRow(1);

}
	</SCRIPT>



<HTML>
<BODY>

	<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

	<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
	<br/>
	<TABLE id="dataTable" width="1300" border="1">
	      <DIV class = "table">
	         <SPAN class = "titles">
	             <TH>Weld No.</TH>
	             <TH>Drawing No.</TH>
	             <TH>Thickness</TH>
	             <TH>Extent %</TH>
	             <TH>Accept. level</TH>
	             <TH>Weld kat</TH>
	             <TH>Max dB</TH>
	             <TH>Depth mm</TH>
	             <TH>Length mm</TH>
	             <TH>Angle (o)</TH>
	             <TH>Type of defect</TH>
	             <TH>Accepted/Not accepted</TH>
	             <TH>Date</TH>
	         </SPAN>
               </DIV>
	</TABLE>
	     
</BODY>
</HTML>

Последний раз редактировалось Judgin, 31.05.2021 в 11:45.
Ответить с цитированием
  #2 (permalink)  
Старый 31.05.2021, 14:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,122

Judgin,
что мешает проверить то, что форма уже создана и не создавать повторно?
Ответить с цитированием
  #3 (permalink)  
Старый 31.05.2021, 16:41
Аспирант
Отправить личное сообщение для Judgin Посмотреть профиль Найти все сообщения от Judgin
 
Регистрация: 31.05.2021
Сообщений: 32

Сообщение от рони Посмотреть сообщение
Judgin,
что мешает проверить то, что форма уже создана и не создавать повторно?
Ну подскажите пожалуйста как это сделать, программированием занимаюсь с недавних пор. А в JS вообще новичок.
Ответить с цитированием
  #4 (permalink)  
Старый 31.05.2021, 17:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,122

Judgin,
var my_form = document.querySelector('[name="myForm"]');

            if(!my_form){
            my_form=document.createElement('FORM');
            my_form.name='myForm';
            my_form.method='POST';
            my_form.action='insert_data_to_db.php';
            document.body.appendChild(my_form);
            };
Ответить с цитированием
  #5 (permalink)  
Старый 31.05.2021, 17:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,122

Judgin,
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>
<body>
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
    <br />
    <TABLE id="dataTable" width="1300" border="1">
        <thead class="table">
            <tr class="titles">
                <TH>Weld No.</TH>
                <TH>Drawing No.</TH>
                <TH>Thickness</TH>
                <TH>Extent %</TH>
                <TH>Accept. level</TH>
                <TH>Weld kat</TH>
                <TH>Max dB</TH>
                <TH>Depth mm</TH>
                <TH>Length mm</TH>
                <TH>Angle (o)</TH>
                <TH>Type of defect</TH>
                <TH>Accepted/Not accepted</TH>
                <TH>Date</TH>
            </tr>
        </thead>
        <tbody></tbody>
    </TABLE>
    <script>
        function addRow(tableID) {
            var my_form = document.querySelector('[name="myForm"]');
            var table = document.getElementById(tableID);
            if (!my_form) {
                my_form = document.createElement('FORM');
                my_form.name = 'myForm';
                my_form.method = 'POST';
                my_form.action = 'insert_data_to_db.php';
                document.body.appendChild(my_form);
                table.replaceWith(my_form);
                my_form.append(table)
            }
            var row = table.tBodies[0].insertRow(-1);
            for (let i = 0; i < 13; i++) {
                var cell0 = row.insertCell(i);
                var element0 = document.createElement("input");
                element0.type = "text" + i;
                element0.name = "name" + i;
                element0.id = "input";
                cell0.appendChild(element0);
            }
        }
        function deleteRow(tableID) {
            document.getElementById("dataTable").tBodies[0].deleteRow(-1);
        }
    </script>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 01.06.2021, 09:48
Аспирант
Отправить личное сообщение для Judgin Посмотреть профиль Найти все сообщения от Judgin
 
Регистрация: 31.05.2021
Сообщений: 32

[quote=рони;537453]Judgin,

Все работает, благодарю!

Последний раз редактировалось Judgin, 01.06.2021 в 12:37.
Ответить с цитированием
  #7 (permalink)  
Старый 01.06.2021, 10:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,122

Judgin,
не копируйте сообщения целиком, без необходимости, есть цитирование.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать обработку динамически созданной формы через ajax? Wimko AJAX и COMET 4 08.10.2019 16:37
Доступ к динамически созданным полям формы Nicson Общие вопросы Javascript 20 26.02.2016 21:04
ajax передача отдельной переменной и формы dmitriy94 AJAX и COMET 11 16.01.2015 23:33
геометрические формы динамически imediasun1 (X)HTML/CSS 0 17.01.2014 15:10
Гугл-Хром динамически не создаёт первую форму внутри формы. Глюк? mister_maxim Элементы интерфейса 2 24.11.2012 18:13