Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   сделать таблицу. (https://javascript.ru/forum/misc/35565-sdelat-tablicu.html)

dima*** 14.02.2013 19:01

сделать таблицу.
 
Нужно сделать таблицу.
function rew(k,m){
var pov=[];
for (i=0;i<c.length; i++)  {	
 if(((u[k][0]==c[i][0]&&u[m][0]==c[i][2])||(u[k][0]==c[i][2]&&u[m][0]==c[i][0]))==!null){
 pov.push(c[i]);
 }
}
for (i=0;i<pov.length; i++)  {
document.write(pov[i]);
}}


for (k=0;k<u.length; k++){
for (m=0;m<u.length; m++){
rew(k,m);

document.write(':');
}
document.write('<br>');
}

":"-Это столбцы




Попытка решить самому:
document.write("<table border=1>");
	for (k = 0; k < u.length; k++) {
	    document.write("<tr>");
	    for (m = 0; m < u.length; m++) {
	      
		   document.write("<td>"+rew(k,m)+"</td>")
	    }
	    document.write("</tr>")
	}
	document.write("</table>");

Deff 14.02.2013 19:07

Цитата:

Сообщение от dima***
Попытка решить самому:

Создайте полную строку со всей таблицей(дополняя переменную), не забывайте о теге <tbody>
затем выводите всё единственным document.write

dima*** 14.02.2013 19:11

Цитата:

Сообщение от Deff (Сообщение 234034)
Создайте полную строку со всей таблицей(дополняя переменную), не забывайте о теге <tbody>
затем выводите всё единственным document.write

Это как?Где можно посмотреть?

Deff 14.02.2013 19:16

var strTabl="<table border=1><tbody>\n";
	for (k = 0; k < 4; k++) {
	    strTabl+= "\n<tr>\n";
	    for (m = 0; m < 5; m++) {
	         strTabl+= "<td>"+"строка " +k+"; яч "+m+"</td>";
	    }  strTabl+=  "\n</tr>\n";
	}
	    strTabl+= "\n</tbody></table>";
alert(strTabl);

dima*** 14.02.2013 19:35

Deff-спасибо.

dima*** 15.02.2013 10:08

Переделал таблицу,а что ставить между тегами <td> и </td>?

var strTabl="<table border=1><tbody>\n";
	    for (k = 0; k < u.length; k++) {
	        strTabl+= "\n<tr>\n";
	        for (m = 0; m < u.length; m++) {
	             strTabl+= "<td>"+...........+"</td>";
	        }  strTabl+=  "\n</tr>\n";
	    }
	        strTabl+= "\n</tbody></table>";
document.write	(strTabl);

danik.js 15.02.2013 11:17

Цитата:

Сообщение от Deff
<table border=1></body>

Deff, ты че, курнул чтоли?

Я больше предпочитаю dom-методы:

<!DOCTYPE html>
<body>
<script>
var table, row, data;

table = document.createElement('table');
table.border = 1;
for (var k = 0; k < 4; k++) {
    row = document.createElement('tr');
    for (var m = 0; m < 5; m++) {
        data = document.createElement('td');
        data.innerHTML = "строка " +k+"; яч "+m;
        row.appendChild(data);
    }
    table.appendChild(row);
}
document.body.appendChild(table);
</script>
</body>


Доктайп не должен быть XHTML, иначе в IE7 будут проблемы (без tbody)

Deff 15.02.2013 11:57

danik.js,
Coздал всю внутренность таблицы - сунул в созданный тег табле через appendChild, и всё вместе вставил в DOM, это и есть рекомендованный способ при создании многоэлементного узла!

document.createElement('td'); для каждого подэлемента это и есть не Айс, - при создании DOM объекта куча времени.

danik.js 15.02.2013 12:10

Deff, я с этим и не спорю. Вот только в данном случае абсолютно без разницы какой способ выбрать. Я предпочел dom-методы, для повышения читабельности.

Вопрос к тебе касался
Цитата:

Сообщение от Deff
не забывайте о теге <tbody>

и
Цитата:

Сообщение от dima***
<table border=1></body>

И первое и второе - бред. Как я уже говорил, tbody нужен только для старых ослов при доктайпе XHTML. Проще сменить доктайп и не париться с такими нюансами.

Deff 15.02.2013 12:34

danik.js,
Cтранный
Цитата:

Сообщение от danik.js
И первое и второе - бред.

Не выражайте мысли столь агресивно,*(я как то уже говорил),
Вы можете иногда и ошибаться.
Цитата:

Как я уже говорил, tbody нужен только для старых ослов при доктайпе XHTML. Проще сменить доктайп и не париться с такими нюансами.
Я работаю на техподдержке сервиса бесплатных форумов,их более 400 000
Доступа к движку нет, доктайп - не сменить
Есть нюансы неправильной работы DOM c таблами, при отсутствии явного tbody, да и юзер не помня о нём из tr часто пытается считать parent(ом) табле

dima*** 15.02.2013 12:38

Чем плох этот способ?

var i, j;
	document.write("<table border=1>");
	for (i = 0; i < c.length; i++) {
	    document.write("<tr>");
	    for (j = 0; j < c[i].length-1; j++) {
	        document.write("<td>" + c[i][j] + "</td>")
	    }
	    document.write("</tr>")
	}
	document.write("</table>");


А можно помочь?У меня функция получается внутри циклов.Или как-то по другому нужно делать?

danik.js 15.02.2013 12:39

Цитата:

Сообщение от Deff
<table border=1></body>

Это значит не бред? А что тогда?

danik.js 15.02.2013 12:45

Цитата:

Сообщение от dima***
Чем плох этот способ

Тем что после каждого document.write незамедлительно происходит парсинг вставленного html и создание dom-узлов. Поэтому document.write("<table border=1>") уже создаст HTMLTableElement, имеющий innerHTML как <table border="1"></table>
Тоесть в итоге в документе не та разметка, которую вы пишете, а воссозданная по dom-модели, которая создана при парсинге вашей разметки.

Deff 15.02.2013 12:46

danik.js,
это очепятка ночная - поправил. *Наезд всегда вызывает отторжение и противостояние. Даже не всматривался в Ваше написанное, - ток реакция на "бред"

Deff 15.02.2013 12:47

dima***,
Поправил Пост 4

dima*** 15.02.2013 12:58

Я тоже подправил.Но вопрос остался -как вставить функцию???
Хотя бы где подсмотреть.Весь интернет облазил,ничего похожего не нашёл.:(

danik.js 15.02.2013 13:06

В функции rem сделать тоже самое - завести строковую переменную, и вместо document.write засовывать все в эту строку. В конце вернуть строку: return str;

danik.js 15.02.2013 13:07

Цитата:

Сообщение от dima***
есь интернет облазил,ничего похожего не нашёл

Звучит не убедительно :)

dima*** 15.02.2013 13:30

danik.js-спасибо!получилось!!!

Цитата:

Сообщение от danik.js (Сообщение 234313)
Звучит не убедительно :)

Почему?И где можно было найти "Функция в таблице"?
Просто про таблицы мало где написано.И сделаны они в таком виде,в каком я написал.

danik.js 15.02.2013 13:34

Цитата:

Сообщение от dima***
"Функция в таблице"

Лол )

dima*** 15.02.2013 13:46

Вопрос "вдогонку" .Как заменить undefined в таблице на ""?

danik.js 15.02.2013 13:49

Какой еще undefined?

dima*** 15.02.2013 13:53

В пустых ячейках выходит undefined.А хотелось бы пустую ячейку

danik.js 15.02.2013 13:59

function правильная (){
    var str;
    alert(str);
}

function неправильная (){
    var str = '';
    alert(str);
}

правильная();
неправильная();


Внимание! Имена функций даны на кириллице только в учебных целях. Не повторять - опасно для жизни!

dima*** 15.02.2013 14:11

А можно прописать в таблице,а не в функции?

danik.js 15.02.2013 14:14

что прописать? dima***, хватит сопли жевать уже, давай код сюда если не можешь разобраться сам.

dima*** 15.02.2013 14:34

danik.js-спасибо!
вроде понятно.Попробую сам разобраться.

dima*** 15.02.2013 15:17

Что-то,не получается...В пустых ячейках выходит undefined.А хотелось бы пустую ячейку

function rew(k,m){
var pov=[];
for (i=0;i<c.length; i++)  {	
 if(((u[k][0]==c[i][0]&&u[m][0]==c[i][2])||(u[k][0]==c[i][2]&&u[m][0]==c[i][0]))==!null){
 pov.push(c[i]);
 }
}
for (i=0;i<pov.length; i++)  {
return pov;
}}

danik.js 15.02.2013 15:24

Цитата:

Сообщение от dima***
for (i=0;i<pov.length; i++)  {
return pov;
}

return не может быть в цикле. Эта инструкция прерывает функцию и все циклы, конечно.

Давай целиком код, тут пока не видно undefined

danik.js 15.02.2013 16:07

Цитата:

Сообщение от danik.js
return не может быть в цикле. Эта инструкция прерывает функцию и все циклы, конечно.

Тебе советы даешь, а ты их игнорируешь. И </body> внутри таблицы стоит убрать, как уже выяснили.

Вобще, лучше бы я этого не видел...:(

функция rew в случае когда pow нулевой длины - не возвращает ничего, в итоге получаем undefined.

dima*** 15.02.2013 16:27

убрал,чтобы не смущало.

dima*** 15.02.2013 18:46

а как сделать чтобы row был не нулевой длины?

danik.js 15.02.2013 18:54

Зачем?

dima*** 15.02.2013 19:07

Цитата:

Сообщение от danik.js (Сообщение 234413)
Тебе советы даешь, а ты их игнорируешь.

функция rew в случае когда pow нулевой длины - не возвращает ничего, в итоге получаем undefined.

Пытаюсь понять...

danik.js 15.02.2013 20:11

Бери выше - я уже два раза сказал про return внутри for{}

dima*** 16.02.2013 11:27

danik.js-спасибо огромное!Всё получилось в лучшем виде.:thanks:

Ещё вопрос.Как и где прописать -если k==m,то цвет ячейки красный.


<!DOCTYPE html>
<body>
<script>
var table, row, data;

table = document.createElement('table');
table.border = 1;
for (var k = 0; k < 4; k++) {
    row = document.createElement('tr');
    for (var m = 0; m < 5; m++) {
        data = document.createElement('td');
        data.innerHTML = "строка " +k+"; яч "+m;
        row.appendChild(data);
    }
    table.appendChild(row);
}
document.body.appendChild(table);
</script>
</body>

danik.js 16.02.2013 13:04

Кстати Deff прав (я с этим и не спорил) что через dom-методы таблица создается на порядок медленней. Я сделал тест, можно сравнить. Тем не менее, не во всех случаях dom-методы оказываются медленней (по крайней мере в современных браузерах), например можно поглядеть этот тест.

В любом случае глупо биться за доли милисекунд (и даже за милисекунды), когда этого совершенно не требуется.

Алерт выведет время генерации таблицы в милисекундах.
<!DOCTYPE html>
<body>
<script>
var table, row, data;

/* delete */var tstart = new Date();
table = document.createElement('table');
table.border = 1;
for (var k = 0; k < 4; k++) {
    row = document.createElement('tr');
    for (var m = 0; m < 5; m++) {
        data = document.createElement('td');
        data.innerHTML = "строка " +k+"; яч "+m;
        if (k == m) {
            data.style.backgroundColor = 'red';
            //data.style.borderColor = 'red';
            //data.style.color = 'red';
        }
        row.appendChild(data);
    }
    table.appendChild(row);
}
document.body.appendChild(table);
/* delete */alert(new Date() - tstart);
</script>
</body>

dima*** 16.02.2013 13:45

danik.js-спасибо!А,что получается, что самый быстрый для таблиц получается IE9?Если таблиц на сайте 1000 штук будет,всё-таки что лучше использовать.

А в таблице у Deffа как будет не подскажешь?
Что-то вроде,if(k==m){'<td.style.backgroundColor= "red">' } или где подсмотреть...

var strTabl="<table border=1><tbody>\n";
	for (k = 0; k < 4; k++) {
	    strTabl+= "\n<tr>\n";
	    for (m = 0; m < 5; m++) {
	     strTabl+= "<td + (k == m ? " style=color:red" : "") >"+"строка " +k+"; яч "+m+"</td>";
	    }  strTabl+=  "\n</tr>\n";
	}
	    strTabl+= "\n</tbody></table>";
document.write(strTabl);

danik.js 16.02.2013 13:59

strTabl+= "<td" + (k == m ? " style=color:red" : "") +">"+"строка " +k+"; яч "+m+"</td>";

Если все 1000 штук будут генерироваться за один раз, то лучше innerHTML

dima*** 16.02.2013 14:05

спасибо!
А если штук 5-10 на страницу?


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