Member 13682154 Ответов: 2

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

Я хочу добавить новые строки в таблицу с данными, которые вводятся в форму.

Код для формы, откуда она должна брать данные: 
<div class="left">


               Full name: <br>
                   <input name="name" id="name_input" type="text" onclick="myFunction0()" ><br>
           <p id="myP" style="font-size:12px; display:none; color:gray">*Help text here.</p>
               Email: </br>
                   <input id="email" type="email" onclick="myFunction1()"><br>
                   <p id="myP1" style="font-size:12px; display:none; color:gray">*Help text here.</p>
               City <br>
                   <input name="name" id="city" type="text" onclick="myFunction2()" ><br><br>
               <p id="myP2" style="font-size:12px; display:none; color:gray">*Help text here.</p><br><br><br><br><br>


<div class = "right " style="margin-top:28px;">
	
  Ride in group? <br>
                    <label class="container">Always</label>
                    <input type="radio" id="a" name="feature" value="true">
                    <label class="container">Sometimes</label>
                    <input type="radio" id="s" name="feature" value="false" />
					<label class="container">Never</label>
                    <input type="radio" id="n" name="feature" value="false" /><br><br><br>
					
                
          
			
               
                Days of the week <br>
                    <label >Sun</label>
                    <input type="checkbox" id="sun" name="feature" value="true">
                    <label >Mon</label>
                    <input type="checkbox" id="mon" name="feature" value="false" />
					<label >Tue</label>
                    <input type="checkbox" id="tue" name="feature" value="false" />
					<label >Wen</label>
                    <input type="checkbox" id="wen" name="feature" value="false" />
					<label >Thu</label>
                    <input type="checkbox" id="thu" name="feature" value="false" />
					<label >Fri</label>
                    <input type="checkbox" id="fri" name="feature" value="false" />
					<label >Sat</label>
                    <input type="checkbox" id="sat" name="feature" value="false" /><br><br>
					
					<button type="submit" name="submit" class=" w3-button w3-green" id="add_btn" value="Save" style="margin-right:240px ; float:right " ><a style="font-size:14px; color:white!important ">Save </a></button>
					<button  class=" w3-button w3-gray" id="cancel" value="Cancel" style=" float:right">Cancel </button>
					
                
</div></div>


Что я уже пробовал:

Я попробовал с этим кодом добавить новую строку:
<script>
function addRow() {
  var table = document.getElementById('myTable');
  var columnLength = table.getElementsByTagName('tr')[0].children.length;
  var units = document.getElementsByClassName('unit-table');
  var tr = document.createElement('tr');
  tr.className = 'unit-table';
  for (var i = 0; i < columnLength; i++) {
    var td = document.createElement('td');
    var text = document.createElement('input');
    text.type = 'text';
    td.appendChild(text);
    tr.appendChild(td);
  }
  table.appendChild(tr);
}

document.getElementById('add_btn').onclick = addRow;
</script>

ZurdoDev

И в чем же проблема? Код JavaScript, который у вас есть, выглядит так, как будто он добавляет строку в таблицу.

2 Ответов

Рейтинг:
2

W∴ Balboos, GHB

Раньше я использовал формы - иногда я все еще использую - но я обнаружил, что гораздо удобнее использовать AJAX. Вы отправляете свои данные на сервер, обрабатываете их, а затем возвращаете обработанную работу обратно на экран (в данном случае на вашу таблицу). Вам не нужно name=; просто id= и DOM, чтобы получить нужные вам значения.

Особенно меня раздражало то, что при отправке формы загружалась (новая?) страница.

В вашем случае у вас есть <tbody> - поэтому вы даете ему идентификатор, а затем перестраиваете свою таблицу в вашем AJAX (с новыми данными) и возвращаете ее взамен старой.

Общим местом, где этот тип лечения работает очень хорошо, является таблица с кнопками да/нет в каждой строке. Когда вы нажимаете кнопку Да или нет, данные отправляются на сервер, ответ записывается, и таблица обновляется с новым населением с опущенной (или измененной) строкой. Выглядит довольно красиво, поскольку список уменьшается, как это обычно бывает.

Рейтинг:
0

Sarita Mall

Привет,

Проблема заключается в вашей кнопке сохранения.

После добавления строк в таблицу страница перезагружается ,из-за этого вы не можете видеть изменения в таблице.
используйте код ниже и замените свой кнопочный элемент управления на ниже:



СКРИПТ:

<script type="text/javascript">
        function addRow() {
            var table = document.getElementById('myTable');
            var columnLength = table.getElementsByTagName('tr')[0].children.length;          
            var units = document.getElementsByClassName('unit-table');          
            var tr = document.createElement('tr');
            tr.className = 'unit-table';
            for (var i = 0; i < columnLength; i++) {              
                var td = document.createElement('td');
                var text = document.createElement('input');
                text.type = 'text';
                text.id = 'text' + i;
                if (i == 0) {
                    text.value = document.getElementById('name_input').value;
                } else if (i == 1) {
                    text.value = document.getElementById('email').value;
                } else if (i == 2) {
                text.value = document.getElementById('city').value;
                }
                td.appendChild(text);
                tr.appendChild(td);
            }
            table.appendChild(tr);
        }

        //    document.getElementById('add_btn').onclick = addRow();
    </script>


html часть:

<table id="myTable" border="1" cellpadding="5" cellspacing="5"><tbody><tr class="unit-table"><td>                    Full name:
               </td><td>                    Email:
               </td><td>                    City:
               </td></tr></tbody></table>



Сохранить код кнопки:

<input id="Button1" type="button" value="button" onclick="addRow();"/>