Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > Динамическое создание эл-ов


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

Код

<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
Потому что ты сразу рисуешь   таблицу при загрузке страницы.  Используй document.createElement. Например создать форму
Код

document.createElement("form");

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

Автор: нуп 8.4.2010, 22: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>


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

Автор: DenisTv 9.4.2010, 08:14
Я как раз хотел выложить это же)
Спасибо за помощь)

Автор: skyboy 9.4.2010, 10:36
у 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);
 }
}

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)