VPF::Динамическое создание эл-ов - Форум программистов

DenisTv

Дата 8.4.2010, 21:35 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 3.11.2005

Репутация: нет
Всего: нет

Доброго времени суток!
Предыстория: Для решения задачи требуется ввод матрицы. Основная проблема в том, что размерность матрицы должен задавать пользователь.
Путем многочисленного "тыкания пальцем в небо" написал код (сомневаюсь в его эффективности, но, как ни странно, работает):

Код


<html>
<head>
   <title>Untitled</title>
</head>


<body>

<form name="myForm">
<table>
<tr>
<td>Строки</td><td><input type="text" name="Row" value="2"></td></tr>
<tr><td>Столбцы</td><td><input type="text" name="Col" value="3"></td></tr>
<!-- <tr><td><input type="submit"></td><td><input type="reset"></td></tr> -->
</table>
</form>



<script type="text/javascript"><!--


function CreateInputMatrix(){

        var rCount=document.myForm.Row.value*1,cCount=document.myForm.Col.value*1;

        document.write("<form name='myForm'>");
        document.write("<table>");
        for (var i=0; i<rCount; i++){
            document.write("<tr>");
            for (var j=0; j<cCount; j++){
                document.write("<td><input type='text' name='matrix"+i+""+j+"' required></td>");
            }
            document.write("</tr>");
        }
        //window.location.reload(true);

    }

// автозапуск*)
    CreateInputMatrix();
//--></script>

<p><a href="#" onclick="CreateInputMatrix();">Задать</a></p>

</body>
</html>

Проблема в том, что всё работает, если ввести параметры и сделать обновление страницы, но если нажимать "Задать", то элементы создаются и уничтожаются.
Вопрос: как можно выполнить функцию не прибегая к f5 и почему так происходит?

ps кодирую на object pascal и c++. javascript только начал изучать.

нуп

Дата 8.4.2010, 21:42 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33

Потому что ты сразу рисуешь таблицу при загрузке страницы. Используй document.createElement. Например создать форму

Код


document.createElement("form");

DenisTv

Дата 8.4.2010, 21:54 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 3.11.2005

Репутация: нет
Всего: нет

1. Я нубко.
2. что даст document.createElement("form"); ?
3. что значит "сразу рисуешь таблицу"? я ж "просто текст" вывожу) smile

4. Я нубко.

нуп

Дата 8.4.2010, 22:33 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33

Код


<html>
<head>
   <title>Untitled</title>
</head>
<body>
<form name="myForm">
<table>
<tr>
<td>РЎС‚СЂРѕРєРё</td><td><input type="text" name="Row" value="2"></td></tr>
<tr><td>РЎС‚РѕР»Р±С†С‹</td><td><input type="text" name="Col" value="3"></td></tr>
<!-- <tr><td><input type="submit"></td><td><input type="reset"></td></tr> -->
</table>
</form>
<script type="text/javascript"><!--
function CreateInputMatrix(){
    var rCount = document.myForm.Row.value * 1;
    var cCount = document.myForm.Col.value * 1;

    var body = document.getElementsByTagName("body")[0];
    
    var tbl = document.createElement("table"); // создание таблицы
    tbl.border = 1;
    var tblBody = document.createElement("tbody"); // тело таблицы
    for (var i = 0; i < rCount; i++) {
        var row = document.createElement("tr"); // создаем строку
        for (var j = 0; j < cCount; j++) {
            var cell = document.createElement("td"); // создаем ячейку
            var text = "lalala " + i + " ->>> " + j; //  текст ячейки
            var cellText = document.createTextNode(text); //  текст в ячейки
            cell.appendChild(cellText); // добавляем текст в ячейку
            row.appendChild(cell);  // добавляем ячейку в строку
        }
        
        tblBody.appendChild(row);  // добавляем  строку 
    }
    tbl.appendChild(tblBody);  // добавляем тело таблицы
    body.appendChild(tbl);  // добавляем таблицу к body
    
}
//--></script>
<p><a href="#" onclick="CreateInputMatrix();">Р—Р°РґР°С‚СЊ</a></p>
</body>
</html>

форму сам допишешь

Это сообщение отредактировал(а) нуп - 8.4.2010, 22:38

DenisTv

Дата 9.4.2010, 08:14 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 64
Регистрация: 3.11.2005

Репутация: нет
Всего: нет

Я как раз хотел выложить это же)
Спасибо за помощь)

skyboy

Дата 9.4.2010, 10:36 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 3
Всего: 260

у HTMLTableElement есть метод insertRow()
у HTMLRowElement есть метод insertCell()
как мне кажется, они повыразительнее универсального createElement:

Код


var rowCount = 6;
var cellCount = 5;
var tbl = document.createElement('table');
for(var i= 0; i< rowCount; i++) {
 var row = tbl.insertRow(0);
 for(var j= 0; j< cellCount; j++) {
  row.insertCell(0);
 }
}

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »