Не появляется форма с заполненными данными

@andrett · Регистрация: 25.06.2014

Author24 — интернет-сервис помощи студентам

Доброго времени суток! Помогите разобраться в чем проблема, где нехватает? не срабатывает действие! при нажатии на кнопку добавить должна появляться форма с заполнеными данными , что не так уже голову сломал(( в этом деле относительно недавно )

HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
        <meta charset="UTF-8">
 
   
  <table id="tab1" class="sortable">
    <thead>
        <tr>
            <th>ФИО</th>
            <th>Должность</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<form action="" id="add_persons" method="post" onsubmit="addRow();return false;">
<fieldset>
<legend>Добавить сотрудника</legend>
    <ul>
        <li>
            <label for="name">Фамилия</label>
            <input type="text" name="name" id="name" value="" size="12" tabindex="1" />
        </li>
        <li>
            <label for="initials">Инициалы</label>
            <input type="text" name="initials" id="initials" value="" size="12" tabindex="2" />
        </li>
        <li>
            <label for="posada">Должность</label>
            <input type="text" name="posada" id="posada" value="" size="12" tabindex="3" />
        </li>
        <li>
            <label for="subm">Действия</label>
            <input type="submit" name="subm" class="submit" value="Добавить" tabindex="4" />
        </li>
    </ul>
</fieldset>
</form>  
-
 <script> 
var d = document;
 
var name;
var initials;
var posada;
 
function addRow()
{
    // Считываем значения с формы
    name = d.getElementById('name').value;
    initials = d.getElementById('initials').value;
    posada = d.getElementById('posada').value;
 
    // Находим нужную таблицу
    var tbody = d.getElementById('tab1').getElementsByTagName('tbody')[0];
 
    // Создаем строку таблицы и добавляем ее
    var row = d.createElement("TR");
    tbody.appendChild(row);
 
    // Создаем ячейки в вышесозданной строке
    // и добавляем тх
    var td1 = d.createElement("TD");
    var td2 = d.createElement("TD");
 
    row.appendChild(td1);
    row.appendChild(td2);
 
    // Наполняем ячейки
    td1.innerHTML = name+' '+initials;
    td2.innerHTML = posada;
} 
   
 <script/> 
   </body>

@kalabuni · 25.05.2016, 22:41

1. строки к таблице надо добавлять методом insertRow (-1)

2. ячейки в строке добавляются методом insertCell (-1)

3. значением свойства innerHTML может быть только строка, а вы пытаетесь "впихнуть" туда теги целиком.

4. зачем использовать кнопку типа сабмит с отменой её действия, если имеется кнопка типа баттон?

в общем, ловите работающий код

HTML5

<html>
<head>
<script> 
 
function myFunc (f)
{
var tb = document.getElementById('tbl').getElementsByTagName('tbody')[0];
 
var ro = tb.insertRow (-1);
 var ce = ro.insertCell (-1); ce.innerHTML = f ['sur'].value + ' ' + f ['ini'].value;
 var ce = ro.insertCell (-1); ce.innerHTML = f ['pos'].value;
f.reset ();
}
</script> 
<head>
<body>
<form>
<p>фамилия: <input name="sur">
<p>инициалы: <input name="ini">
<p>должность: <input name="pos">
<p><input type="button" value="добавить" onclick="myFunc (this.form)">
</form>
   
<table id="tbl" cellspacing="0" cellpadding="5" border>
<thead><tr><th>ФИО</th><th>Должность</th></tr></thead>
<tbody></tbody>
</table>
 
</body>
</html>

@andrett · 26.05.2016, 10:53 **[ТС]**

Супер! то что нужно .Спасибо .. осталось только добавить автоматическую нумерацию строк и сделать, чтоб заголовок был скрыт по умолчанию))... Может найдется у кого подсказка, как с этим быть?

@kalabuni · 26.05.2016, 11:58

HTML5

<script> 
 
function myFunc (f)
{
var tb = document.getElementById('tbl').getElementsByTagName('tbody')[0];
var th = document.getElementById('tbl').getElementsByTagName('thead')[0];
var ro = tb.insertRow (-1);
var ce = ro.insertCell (-1); ce.innerHTML = tb.rows.length;
var ce = ro.insertCell (-1); ce.innerHTML = f ['sur'].value + ' ' + f ['ini'].value;
var ce = ro.insertCell (-1); ce.innerHTML = f ['pos'].value;
if (tb.rows.length) th.style.display = '';
f.reset ();
}
</script> 
<head>
<body>
<form>
<p>фамилия: <input name="sur">
<p>инициалы: <input name="ini">
<p>должность: <input name="pos">
<p><input type="button" value="добавить" onclick="myFunc (this.form)">
</form>
   
<table id="tbl" cellspacing="0" cellpadding="5" border>
<thead style="display: none"><tr><th>№</th><th>ФИО</th><th>Должность</th></tr></thead>
<tbody></tbody>
</table>

@andrett · 26.05.2016, 16:57 **[ТС]**

kalabuni, Извините, если злоупотребляю вашей добротой, подскажите как сделать так чтобы, если я добавлю к форме еще пару строк но уже числовые <p>Ширина:<input type="number" name="hith"> и <p>Высота:<input type="number" name="weith">, чтоб скрипт значения перемножил , а результат был выведен в следующую колонку при этом введенные данные сохранялись в таблице как и текстовые ?

@kalabuni · 27.05.2016, 05:45

и как же в заголовке будет поименован этот ваш новый столбец?
неужто "площадь"?

проанализируйте строку #9 моего последнего кода -- вам нужна будет аналогичная, только вместо
sur и ini пропишите имена ваших новых полей,
а вместо + ' ' + пропишите оператор умножения *

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

@andrett · 27.05.2016, 10:50 **[ТС]**

kalabuni, Проанализировав я пришел к выводу, что все очень просто оказалось... спасибо за подсказку)) Вы все правильно сказали за площадь!... дело всего лишь в одной строке

Java

1	var ce = ro.insertCell (-1); ce.innerHTML = f ['sur'].value * f ['ini'].value * f ['pos'].value;

... Появилась другая задача с удалением строк.. хочется крестик напротив каждой строки при нажатии на который строка удаляется... что здесь сможете посоветовать?

@kalabuni · 27.05.2016, 13:52

нарисуйте крестик, сохраните его как файл в формате gif|jpg|png
в заголовке предусмотрите ещё одну ячейку
внутри функции добавьте создание ещё одной ячейки, создание картинки, назначение ей функции удаления строки по клику

Javascript

var ce = ro.insertCell (-1), im = document.createElement ('img');
im.src = 'путь к файлу с крестиком';
im.onclick = function ()
{
tb.deleteRow (this.parentNode.parentNode.rowIndex);
}
ce.appendChild (im);

@andrett · 27.05.2016, 14:59 **[ТС]**

kalabuni, все получилось))спасибо но, не удаляется 1 строка!!

kalabuni, Мне очень нравится Ваш подход, легкий и четкий! я бы даже к вам на курсы записался с удовольствием)

@kalabuni · 27.05.2016, 15:54

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

не удаляется 1 строка!!

есть такое дело
это я обмишурился, про строку заголовка забыл
пропишите -- tb.deleteRow (this.parentNode.parentNode.rowIndex - 1);

Добавлено через 9 минут

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

я бы даже к вам на курсы записался с удовольствием

удовольствия не обещаю -- я учеников розгами бью

@andrett · 27.05.2016, 21:52 **[ТС]**

Немного опять сбился с курса, дело в том, что при добавлении в форму

Java

<p>Рисунок: <select class="dropdown" name="tarif">
    <option value="" class="label">Выбрать рисунок</option>
    
    <option value="430">Ротердам</option>
    <option value="500">Ницца</option>
    <option value="600">Венеция</option>
</select>

не пойму как сделать, чтобы в расчетах использовалось значение value (что и происходит п по умолчанию), а в колонку записывалось выбранное имя (а выводится value)?? внутри функции я добавил

Java

1	var ce = ro.insertCell (-1); ce.innerHTML = f ['tarif'].value;

, но думаю что здесь есть подвох.. help please//

@kalabuni · 27.05.2016, 22:22

<form name="frm">
<select name="qwerty">
<option value="123>abc</option>
<option value="456>def</option><!-- этот опшен выбран ->
<option value="789>ghi</option>
</select>
</form>
------------------
var sel = document.frm ['qwerty']
sel.value вернёт 456
sel.options [sel.selectedIndex].text вернёт def

@andrett · 27.05.2016, 23:09 **[ТС]**

kalabuni, спасибо !!! все получилось.

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

@kalabuni · 27.05.2016, 23:39

var HER = 'тупой как дерево';
ce.innerHTML = HER;

Добавлено через 1 минуту

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

а как добавить в нее значение переменной не знаю

значит, и не надо!

@andrett · 28.05.2016, 00:41 **[ТС]**

ну очень надо)

@kalabuni · 28.05.2016, 07:33

andrett, если действительно надо, то опишите задачу нормальным языком
ну не понимаю я вашего" добавил в конце строку итого"
в каком конце?
в какой именно момент эта строка добавляется?
какое такое "итого" может быть в строке? -- в строке могут быть только ячейки
и -- главное -- что за "значение переменной из функции"
из какой функции?
какой-такой переменной
какие данные функция обрабатывает?
что возвращает, если возвращает?
и куда возвращает?
в какой момент она это делает?

@andrett · 28.05.2016, 10:00 **[ТС]**

Вот то что я натворил , я выделил жирным шрифтом, что сделал .. и конце таблицы есть ячейка (тоже жирным выделил) в которую хочу, чтоб записывался полученный результат от просчета общей площади... вот я и подумал нельзя ли в нее просто вставить переменную из функции в эту ячейку (например результат переменной (var ks)=. как то так)
<script>

function myFunc (f)
{
var tb = document.getElementById('tbl').getElementsByTagName('tbody')[0];
var th = document.getElementById('tbl').getElementsByTagName('thead')[0];
var tf = document.getElementById('tbl').getElementsByTagName('tfoot')[0];
var kv = 1000;
var ks = f ['sur'].value/kv * f ['ini'].value/kv * f ['pos'].value * f ['tarif'].value;
var sel = frm ['tarif'];

var ro = tb.insertRow (-1);
var ce = ro.insertCell (-1); ce.innerHTML = tb.rows.length;
var ce = ro.insertCell (-1); ce.innerHTML = f ['sur'].value;
var ce = ro.insertCell (-1); ce.innerHTML = f ['ini'].value;
var ce = ro.insertCell (-1); ce.innerHTML = f ['pos'].value;
var ce = ro.insertCell (-1); ce.innerHTML = ks;
var ce = ro.insertCell (-1); ce.innerHTML = sel.options [sel.selectedIndex].text ;
var ce = ro.insertCell (-1), im = document.createElement ('img');
im.src = /images/media/clos.png';
im.onclick = function ()
{
tb.deleteRow (this.parentNode.parentNode.rowIndex- 1);
}
ce.appendChild (im);

if (tb.rows.length) th.style.display = '';
if (tb.rows.length) tf.style.display = '';
f.reset ();
}
</script>

<form name="frm">
<p>Высота: <input type="number" name="sur">
<p>Ширина: <input type="number" name="ini">
<p>Кол-во: <input name="pos">

<div class="styled-select">

<p>Рисунок: <select name="tarif">
<option value="" class="label">Выбрать рисунок</option>

<option value="430">Ротердам</option>
<option value="500">Ницца</option>
<option value="600">Венеция</option>
</select>
</div>
<p><input type="button" value="добавить" onclick="myFunc (this.form)">
</form>

<table id="tbl" cellspacing="0" cellpadding="5" border>
<thead style="display: none"><tr><th>№</th><th>Высота</th><th>Ширина</th><th>Кол-во</th><th>Квадратура</th><th>Рисунок</th><th>Удалить</th></tr></thead>
<tbody></tbody>
<tfoot style="display: none"><tr><th colspan="2" style="text-align:right;">Площадь МДФ:</th><th> м²</th>
<tr><th colspan="2" style="text-align:right;">Всего</th><th> грн.</th></tr></foot>
</table>

@kalabuni · 28.05.2016, 10:02

у вас со зрением всё в порядке?
где именно жирное вы видите в вами выложенном?

@andrett · 28.05.2016, 10:05 **[ТС]**

kalabuni, обновите страницу все норм!

@kalabuni · 28.05.2016, 10:56

andrett, для вас русский язык неродной?
написать простую фразу - "хочу, чтобы значения ячеек одного столбца тела таблицы суммировались и выводились в соответствующей ячейке футера таблицы" вы никак не могли?
начали писать бред про "переменную из функции"

И зачем с самого начала вы идиотничали про фамилию-инициалы-должность?

@andrett 1 / 1 / 0 Регистрация: 25.06.2014 Сообщений: 151
	28.05.2016, 10:00 [ТС]	17
	Вот то что я натворил , я выделил жирным шрифтом, что сделал .. и конце таблицы есть ячейка (тоже жирным выделил) в которую хочу, чтоб записывался полученный результат от просчета общей площади... вот я и подумал нельзя ли в нее просто вставить переменную из функции в эту ячейку (например результат переменной (var ks)=. как то так) <script> function myFunc (f) { var tb = document.getElementById('tbl').getElementsByTagName('tbody')[0]; var th = document.getElementById('tbl').getElementsByTagName('thead')[0]; var tf = document.getElementById('tbl').getElementsByTagName('tfoot')[0]; var kv = 1000; *var ks = f ['sur'].value/kv f ['ini'].value/kv * f ['pos'].value * f ['tarif'].value; var sel = frm ['tarif']; var ro = tb.insertRow (-1); var ce = ro.insertCell (-1); ce.innerHTML = tb.rows.length; var ce = ro.insertCell (-1); ce.innerHTML = f ['sur'].value; var ce = ro.insertCell (-1); ce.innerHTML = f ['ini'].value; var ce = ro.insertCell (-1); ce.innerHTML = f ['pos'].value; var ce = ro.insertCell (-1); ce.innerHTML = ks; var ce = ro.insertCell (-1); ce.innerHTML = sel.options [sel.selectedIndex].text ; var ce = ro.insertCell (-1), im = document.createElement ('img'); im.src = /images/media/clos.png'; im.onclick = function () { tb.deleteRow (this.parentNode.parentNode.rowIndex- 1); } ce.appendChild (im); if (tb.rows.length) th.style.display = ''; if (tb.rows.length) tf.style.display = ''; f.reset (); } </script> <form name="frm"> <p>Высота: <input type="number" name="sur"> <p>Ширина: <input type="number" name="ini"> <p>Кол-во: <input name="pos"> <div class="styled-select"> <p>Рисунок: <select name="tarif"> <option value="" class="label">Выбрать рисунок</option> <option value="430">Ротердам</option> <option value="500">Ницца</option> <option value="600">Венеция</option> </select> </div> <p><input type="button" value="добавить" onclick="myFunc (this.form)"> </form> <table id="tbl" cellspacing="0" cellpadding="5" border> <thead style="display: none"><tr><th>№</th><th>Высота</th><th>Ширина</th><th>Кол-во</th><th>Квадратура</th><th>Рисунок</th><th>Удалить</th></tr></thead> <tbody></tbody> <tfoot style="display: none"><tr><th colspan="2" style="text-align:right;">Площадь МДФ:</th><th> м²</th> <tr><th colspan="2" style="text-align:right;">Всего</th><th> грн.</th>**</tr></foot> </table> 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	28.05.2016, 10:02	18
	у вас со зрением всё в порядке? где именно жирное вы видите в вами выложенном? 0

@andrett 1 / 1 / 0 Регистрация: 25.06.2014 Сообщений: 151
	26.05.2016, 10:53 [ТС]	3
	Супер! то что нужно .Спасибо .. осталось только добавить автоматическую нумерацию строк и сделать, чтоб заголовок был скрыт по умолчанию))... Может найдется у кого подсказка, как с этим быть? 0

@andrett 1 / 1 / 0 Регистрация: 25.06.2014 Сообщений: 151
	26.05.2016, 16:57 [ТС]	5
	kalabuni, Извините, если злоупотребляю вашей добротой, подскажите как сделать так чтобы, если я добавлю к форме еще пару строк но уже числовые <p>Ширина:<input type="number" name="hith"> и <p>Высота:<input type="number" name="weith">, чтоб скрипт значения перемножил , а результат был выведен в следующую колонку при этом введенные данные сохранялись в таблице как и текстовые ? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	27.05.2016, 05:45	6
	и как же в заголовке будет поименован этот ваш новый столбец? неужто "площадь"? проанализируйте строку #9 моего последнего кода -- вам нужна будет аналогичная, только вместо sur и ini пропишите имена ваших новых полей, а вместо + ' ' + пропишите оператор умножения * и вообще -- вам давно пора включить собственные мозги ко мне, пожалуйста, с новыми вашими прихотями больше не обращайтесь 1

@andrett 1 / 1 / 0 Регистрация: 25.06.2014 Сообщений: 151
	27.05.2016, 14:59 [ТС]	9
	kalabuni, все получилось))спасибо но, не удаляется 1 строка!! kalabuni, Мне очень нравится Ваш подход, легкий и четкий! я бы даже к вам на курсы записался с удовольствием) 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	27.05.2016, 15:54	10
	Сообщение от andrett не удаляется 1 строка!! есть такое дело это я обмишурился, про строку заголовка забыл пропишите -- tb.deleteRow (this.parentNode.parentNode.rowIndex - 1); Добавлено через 9 минут Сообщение от andrett я бы даже к вам на курсы записался с удовольствием удовольствия не обещаю -- я учеников розгами бью 1

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	27.05.2016, 22:22	12
	<form name="frm"> <select name="qwerty"> <option value="123>abc</option> <option value="456>def</option><!-- этот опшен выбран -> <option value="789>ghi</option> </select> </form> ------------------ var sel = document.frm ['qwerty'] sel.value вернёт 456 sel.options [sel.selectedIndex].text вернёт def 1

@andrett 1 / 1 / 0 Регистрация: 25.06.2014 Сообщений: 151
	27.05.2016, 23:09 [ТС]	13
	kalabuni, спасибо !!! все получилось... и если можно "последний" вопросик) .. как мне добавить значение переменной из функции в нужную мне ячейку ? добавил в конце строку итого, а как добавить в нее значение переменной не знаю 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	27.05.2016, 23:39	14
	var HER = 'тупой как дерево'; ce.innerHTML = HER; Добавлено через 1 минуту Сообщение от andrett а как добавить в нее значение переменной не знаю значит, и не надо! 1

@andrett 1 / 1 / 0 Регистрация: 25.06.2014 Сообщений: 151
	28.05.2016, 00:41 [ТС]	15
	ну очень надо) Миниатюры 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	28.05.2016, 07:33	16
	andrett, если действительно надо, то опишите задачу нормальным языком ну не понимаю я вашего" добавил в конце строку итого" в каком конце? в какой именно момент эта строка добавляется? какое такое "итого" может быть в строке? -- в строке могут быть только ячейки и -- главное -- что за "значение переменной из функции" из какой функции? какой-такой переменной какие данные функция обрабатывает? что возвращает, если возвращает? и куда возвращает? в какой момент она это делает? 0

@andrett 1 / 1 / 0 Регистрация: 25.06.2014 Сообщений: 151
	28.05.2016, 10:05 [ТС]	19
	kalabuni, обновите страницу все норм! 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	28.05.2016, 10:56	20
	andrett, для вас русский язык неродной? написать простую фразу - "хочу, чтобы значения ячеек одного столбца тела таблицы суммировались и выводились в соответствующей ячейке футера таблицы" вы никак не могли? начали писать бред про "переменную из функции" И зачем с самого начала вы идиотничали про фамилию-инициалы-должность? 0