Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Скрипт, форма, таблица. (https://javascript.ru/forum/misc/51176-skript-forma-tablica.html)

Обероныч 27.10.2014 16:20
Скрипт, форма, таблица.
 
Итак, задача - таблица поиска пати для ММОРПГ, в которую каждый пользователь может вносить свои данные. Был написан при помощи гугла и базовых познаний скрипт, добавляющий строку в таблицу и данные юзера, сама таблицa, к которой это добавляется и форма ввода юзер-данных, которые должны появиться. При тесте - не работает. Моих познаний не хватает на обнаружение ошибки. Нижайше прошу помощи.
Код прикрепляю.

Вызываемый скрипт:
var d = document;

var nick;
var class;
var level;
var prestige;
var chrono;
var other;
var sfor;

function addRow()
{
    // Считываем значения с формы
    nick = d.getElementById('nick').value;
    class = d.getElementById('class').value;
    level = d.getElementById('level').value;
    prestige = d.getElementById('prestige').value;
    chrono = d.getElementById('chrono').value;
    other = d.getElementById('other').value;
    sfor = d.getElementById('sfor').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");
    var td3 = d.createElement("td");
    var td4 = d.createElement("td");
    var td5 = d.createElement("td");
    var td6 = d.createElement("td");
    var td7 = d.createElement("td");

    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    row.appendChild(td4);
    row.appendChild(td5);
    row.appendChild(td6);
    row.appendChild(td7);   

    // Наполняем ячейки
    td1.innerHTML = nick+;
    td2.innerHTML = class+;
    td3.innerHTML = level+;
    td4.innerHTML = prestige+;
    td5.innerHTML = chrono+;
    td6.innerHTML = other+;
    td7.innerHTML = sfor+;
alert ("Добавлено.")
}


Форма и таблица:
<head>
<script src="/adding.js"></script>
</head>

<body>
<form action="" id="add_persons" method="post" onsubmit="addRow();return false;">
<fieldset>
<legend>Здесь вы можете добавить себя</legend>
    <ul><br>
        <li>
            <label for="nick">Ник</label><br>
            <input type="text" name="nick" id="nick" value="" size="12" tabindex="1" />
        </li><br>
        <li>
            <label for="class">Класс</label><br>
            <input type="text" name="class" id="class" value="" size="12" tabindex="2" />
        </li><br>
        <li>
            <label for="level">Уровень</label><br>
            <input type="text" name="level" id="level" value="" size="12" tabindex="3" />
        </li><br>
<li>
            <label for="prestige">Пройденное уважение</label><br>
            <input type="text" name="prestige" id="prestige" value="" size="12" tabindex="4" />
        </li><br>
<li>
            <label for="chrono">Открытое Хроно</label><br>
            <input type="text" name="chrono" id="chrono" value="" size="12" tabindex="5" />
        </li><br>
<li>
            <label for="other">Другое</label><br>
            <input type="text" name="other" id="other" value="" size="12" tabindex="6" />
        </li><br>
<li>
            <label for="sfor">Ищу</label><br>
            <input type="text" name="sfor" id="sfor" value="" size="12" tabindex="7" />
        </li><br><br>
          <input type="submit" name="subm" class="submit" value="Добавить" tabindex="8" />
	</ul>
</fieldset>
</form>

<table id="tab1">
    <thead>
        <tr>
<th>Ник</th>
<th>Класс</th>
<th>Уровень</th>
<th>Уважение</th>
<th>Хроно</th>
<th>Другое</th>
<th>Ищет</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

</body>

рони 27.10.2014 16:34
Обероныч,
убрать + везде и заменить class тоже везде

ksa 27.10.2014 16:41
Цитата:
Сообщение от Обероныч
При тесте - не работает
Это, что за конструкция такая?
Цитата:
Сообщение от Обероныч 
// Наполняем ячейки
    td1.innerHTML = nick+;
    td2.innerHTML = cls+;
    td3.innerHTML = level+;
    td4.innerHTML = prestige+;
    td5.innerHTML = chrono+;
    td6.innerHTML = other+;
    td7.innerHTML = sfor+;

ksa 27.10.2014 16:42
Изобилие 
<br>

в каждой дырке просто убивает... :(

Обероныч 27.10.2014 16:55
Плюсы убрал, class убрал. Без результата.

<br> в каждой дырке прикрывает дырки в познаниях, к несчастью.

Обероныч 27.10.2014 16:58
Я недокурил маны.
// Наполняем ячейки
    td1.innerHTML = nick+;
    td2.innerHTML = cls+;
    td3.innerHTML = level+;
    td4.innerHTML = prestige+;
    td5.innerHTML = chrono+;
    td6.innerHTML = other+;
    td7.innerHTML = sfor+;

Плюсы не там, да. Тема закрыта, всем спасибо.

рони 27.10.2014 16:59
Обероныч,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
      var d = document;

var nick;
var cls;
var level;
var prestige;
var chrono;
var other;
var sfor;

function addRow()
{
    // Считываем значения с формы
    nick = d.getElementById('nick').value;
    cls = d.getElementById('cls').value;
    level = d.getElementById('level').value;
    prestige = d.getElementById('prestige').value;
    chrono = d.getElementById('chrono').value;
    other = d.getElementById('other').value;
    sfor = d.getElementById('sfor').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");
    var td3 = d.createElement("td");
    var td4 = d.createElement("td");
    var td5 = d.createElement("td");
    var td6 = d.createElement("td");
    var td7 = d.createElement("td");

    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    row.appendChild(td4);
    row.appendChild(td5);
    row.appendChild(td6);
    row.appendChild(td7);

    // Наполняем ячейки
    td1.innerHTML = nick;
    td2.innerHTML = cls;
    td3.innerHTML = level;
    td4.innerHTML = prestige;
    td5.innerHTML = chrono;
    td6.innerHTML = other;
    td7.innerHTML = sfor;
alert ("Добавлено.")

}

  </script>
</head>

<body>
<form action="" id="add_persons" method="post" onsubmit="addRow();return false;">
<fieldset>
<legend>Здесь вы можете добавить себя</legend>
    <ul>
        <li>
            <label for="nick">Ник</label>
            <input type="text" name="nick" id="nick" value="" size="12" tabindex="1" />
        </li>
        <li>
            <label for="cls">Класс</label>
            <input type="text" name="class" id="cls" value="" size="12" tabindex="2" />
        </li>
        <li>
            <label for="level">Уровень</label>
            <input type="text" name="level" id="level" value="" size="12" tabindex="3" />
        </li>
<li>
            <label for="prestige">Пройденное уважение</label>
            <input type="text" name="prestige" id="prestige" value="" size="12" tabindex="4" />
        </li>
<li>
            <label for="chrono">Открытое Хроно</label>
            <input type="text" name="chrono" id="chrono" value="" size="12" tabindex="5" />
        </li>
<li>
            <label for="other">Другое</label>
            <input type="text" name="other" id="other" value="" size="12" tabindex="6" />
        </li>
<li>
            <label for="sfor">Ищу</label>
            <input type="text" name="sfor" id="sfor" value="" size="12" tabindex="7" />
        </li>
          <input type="submit" name="subm" class="submit" value="Добавить" tabindex="8" />
	</ul>
</fieldset>
</form>

<table id="tab1">
    <thead>
        <tr>
<th>Ник</th>
<th>Класс</th>
<th>Уровень</th>
<th>Уважение</th>
<th>Хроно</th>
<th>Другое</th>
<th>Ищет</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>


</body>

</html>

ksa 28.10.2014 08:17
Обероныч, и скрипт можно значительно сократить... 

<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
#add_persons li {
	margin-bottom: 5px;
}
#add_persons label {
	display: block;
}
</style>
<script type='text/javascript'>
var d = document;
function addRow() {
	var a=[
		'nick',
		'cls',
		'level',
		'prestige',
		'chrono',
		'other',
		'sfor'
	];
    // Находим нужную таблицу
    var tbody = d.getElementById('tab1').getElementsByTagName('tbody')[0];
    // Создаем строку таблицы и добавляем ее
    var row = d.createElement("tr");
	for (var i=0; i<a.length; i++) {
		// Считываем значения с формы
		var val = d.getElementById(a[i]).value;
		var td = d.createElement("td");
		row.appendChild(td);
		// Наполняем ячейки
		td.innerHTML = val;
	};
    tbody.appendChild(row);
	alert ("Добавлено.");
};
</script>
</head>
<body>
<form action="" id="add_persons" method="post" onsubmit="addRow();return false;">
<fieldset>
<legend>Здесь вы можете добавить себя</legend>
    <ul>
        <li>
            <label for="nick">Ник</label>
            <input type="text" name="nick" id="nick" value="" size="12" tabindex="1" />
        </li>
        <li>
            <label for="class">Класс</label>
            <input type="text" name="cls" id="cls" value="" size="12" tabindex="2" />
        </li>
        <li>
            <label for="level">Уровень</label>
            <input type="text" name="level" id="level" value="" size="12" tabindex="3" />
        </li>
		<li>
            <label for="prestige">Пройденное уважение</label>
            <input type="text" name="prestige" id="prestige" value="" size="12" tabindex="4" />
        </li>
		<li>
            <label for="chrono">Открытое Хроно</label>
            <input type="text" name="chrono" id="chrono" value="" size="12" tabindex="5" />
        </li>
		<li>
            <label for="other">Другое</label>
            <input type="text" name="other" id="other" value="" size="12" tabindex="6" />
        </li>
		<li>
            <label for="sfor">Ищу</label>
            <input type="text" name="sfor" id="sfor" value="" size="12" tabindex="7" />
        </li>
	</ul>
	
	<input type="submit" name="subm" class="submit" value="Добавить" tabindex="8" />
</fieldset>
</form>
<table id="tab1">
    <thead>
        <tr>
			<th>Ник</th>
			<th>Класс</th>
			<th>Уровень</th>
			<th>Уважение</th>
			<th>Хроно</th>
			<th>Другое</th>
			<th>Ищет</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</body>
</html>

рони 28.10.2014 09:00
ksa,
:) сокращать так сокращать ... ещё минус 2 строки

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type='text/css'>
#add_persons li {
	margin-bottom: 5px;
}
#add_persons label {
	display: block;
}
</style>
<script type='text/javascript'>
var d = document;
function addRow() {
	var a=[
		'nick',
		'cls',
		'level',
		'prestige',
		'chrono',
		'other',
		'sfor'
	];
    // Находим нужную таблицу
    var tbody = d.getElementById('tab1').getElementsByTagName('tbody')[0];
    // Создаем строку таблицы и добавляем ее
    var row = tbody.insertRow();
	for (var i=0; i<a.length; i++) {
		// Считываем значения с формы
		var val = d.getElementById(a[i]).value;
		var td = row.insertCell(i);
		// Наполняем ячейки
		td.innerHTML = val;
	};
	alert ("Добавлено.");
};
</script>
</head>
<body>
<form action="" id="add_persons" method="post" onsubmit="addRow();return false;">
<fieldset>
<legend>Здесь вы можете добавить себя</legend>
    <ul>
        <li>
            <label for="nick">Ник</label>
            <input type="text" name="nick" id="nick" value="" size="12" tabindex="1" />
        </li>
        <li>
            <label for="class">Класс</label>
            <input type="text" name="cls" id="cls" value="" size="12" tabindex="2" />
        </li>
        <li>
            <label for="level">Уровень</label>
            <input type="text" name="level" id="level" value="" size="12" tabindex="3" />
        </li>
		<li>
            <label for="prestige">Пройденное уважение</label>
            <input type="text" name="prestige" id="prestige" value="" size="12" tabindex="4" />
        </li>
		<li>
            <label for="chrono">Открытое Хроно</label>
            <input type="text" name="chrono" id="chrono" value="" size="12" tabindex="5" />
        </li>
		<li>
            <label for="other">Другое</label>
            <input type="text" name="other" id="other" value="" size="12" tabindex="6" />
        </li>
		<li>
            <label for="sfor">Ищу</label>
            <input type="text" name="sfor" id="sfor" value="" size="12" tabindex="7" />
        </li>
	</ul>

	<input type="submit" name="subm" class="submit" value="Добавить" tabindex="8" />
</fieldset>
</form>
<table id="tab1">
    <thead>
        <tr>
			<th>Ник</th>
			<th>Класс</th>
			<th>Уровень</th>
			<th>Уважение</th>
			<th>Хроно</th>
			<th>Другое</th>
			<th>Ищет</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</body>
</html>

ksa 28.10.2014 09:51
Цитата:
Сообщение от рони
сокращать так сокращать ... ещё минус 2 строки
Праильное решееение! (с) :yes:


Часовой пояс GMT +3, время: 22:56.