Wątek przeniesiony 2015-11-15 15:00 z Webmastering przez dzek69.

Javascript zdarzenie onclick

0

Witam!
Wszystko mi się wyświetla tak jak chciałem, ale niestety po kliknięciu w button i uruchamia mi się zdarzenie onclick. (To jeszcze nie jest dopracowane ) I teraz moje pytania:

  1. Dlaczego generuję tą samą tabelę tylko bez stylów, które są umieszczone w dokumencie html ? Chciałbym, aby generowało tabelę, ale ze stylami.
  2. Dlaczego strona cały czas przeładowuję się. Chodzi i mi o kartę: "Łączenie...".

Kod javascript:

var tab = ['',2,'',3,'',1,'','',''];

function printBoard(table){
    document.write('<table><tr>');
    for (var x in table) {
        document.write('<td><input type="text" value="'+table[x]+'"></td>');
    }
    document.write('</tr></table><br>');
    document.write('<input type="button" value="Sprawdz" onclick="aktualizuj()" class="btn" />');
}
printBoard(tab);

Kod html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Nie wiem</title>
	<script type="text/javascript" src="proba.js"></script>
	<style type="text/css" media="screen">
		table,td,tr {
			border: 2px solid green;
		}
		input{
            text-align: center;
			height: 50px;
			width: 50px;
		}
        .btn{
            height:25px;
            width: 80px;
        }

	</style>
</head>
<body>
</body>
</html>
1

Lekcja 1:

Nie używaj document.write, bo nie służy to do tego, co myślisz. Przypadki kiedy można użyć dokument.write można policzyć na palcach jednej ręki, przypadków kiedy nie da się tego zastąpić czymś sensownym nie ma.

Wbij sobie w google kurs dhtml (dynamiczny html), przede wszystkim zainteresuje Cię pewnie innerHTML.

0

Po chwilowej edukacji skleciłem coś takiego czy o to chodzi ?

JS:

function printBoard(table) {
    var tabela = document.getElementById('table');
    var tr = document.createElement('tr');
    for (var x in table) {
        var td = document.createElement('td');
        var textNode = document.createTextNode(table[x]);
        var input = document.createElement('input');
        input.setAttribute('value', table[x]);
        input.appendChild(textNode);
        td.appendChild(input);
        tr.appendChild(td);
    }
    tabela.appendChild(tr);
}


function myf() {
        printBoard(tab);
}

Dzięki znalazłem odpowiedź na moje pytania.

0

Jak działa to może być, choć dałoby się to uprościć i upodobnić do pierwotnego zapisu (wspomniane innerHTML)

0

Czytałem, że stosowanie innerHTML to zły nawyk. Czy to prawda ?

1 użytkowników online, w tym zalogowanych: 0, gości: 1