Javascript.RU

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

Динамическое создание параметра id
Задача. Необходимо создать JavaScript код построения формы в виде таблицы с параметрами: m столбцов и n рядов, m и n задаются пользователем. Пользователь вводит в ячейки созданной табличной формы цифровые данные, которые затем записываются в массив и дальше идут на статистическую обработку. В приведенном скрипте функция mkTbl() создает таблицу с ячейками для ввода. Однако после заполнения ячеек пользователем функция someFunc() выводит значение только первой ячейки. Для исправления ситуации необходимо динамическое создание для ячеек параметра id, чтобы он был уникальным для каждой ячейки, а я не знаю, как это сделать. Помогите, пожалуйста. Я попробовал это сделать таким образом:
td = "<td style = 'background-color:#FFEC8B' onclick = 'someFunc()'>";
td += "<input type='text' id= 'quantity'+i+j name='cc' value='' size='5'/></td>";
Приписывание в циклах функции в td к 'quantity' значений индексов i и j должны бы сделать id уникальным, но это чего-то не работает.
Ниже полный текст скрипта.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-UTF-8"/>
        <title>Знач_ячейк_таб</title>
        <script type="text/javascript"></script>
    </head>
    <body>
        <script type="text/javascript">
  var mT, nT;
  mT = 1; // количество строк 
  nT = 2; // количество колонок
  mkTbl(); // Вызов функции построения таблицы.
//  ********************************************************* 	 
tbl = "";
function mkTbl() {
    td = "<td style = 'background-color:#FFEC8B' onclick = 'someFunc()'>";
    td += "<input type='text' id= 'quantity'+i+j name='cc' value='' size='5'/></td>";
    tHdr = "<table id = 'tbl' style = 'background-color:#1FA35F cursor:pointer' border = 5 cellspacing= 0"
    document.write("<form>");
    document.write(tHdr);
    for (i = 0; i < mT; i++) {
        document.write("<tr>");
        for (j = 0; j < nT; j++) {
            document.write(td);
	        }
        document.write("</tr>");
    }
    document.write("</table>");
    document.write("<input type='button' id='schet' value='Посчитать' >");
    document.write("</form>");
    tbl = document.getElementById("tbl");
    }
function someFunc() {
   var quantity = document.getElementById("quantity").value;
    document.write(quantity);
    alert(quantity);
   }
 
        </script>
    </body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 16.01.2017, 20:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Vlad_Gera,
перепишите код не используя document.write а только
11.Добавление и удаление узлов и 12.Мультивставка: insertAdjacentHTML и DocumentFragment https://learn.javascript.ru/document
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое создание меню ОмаЭль Общие вопросы Javascript 2 19.12.2016 20:57
Динамическое создание таблицы SQL Ambient Общие вопросы Javascript 7 19.07.2016 22:25
динамическое создание click kPaha2 jQuery 3 19.07.2011 11:22
Динамическое создание объектов Telnet jQuery 6 28.06.2011 15:56
Динамическое создание окошек truetrix jQuery 1 22.03.2011 12:46