я разделил эту задачу на две подзадачи : формирование матрицы и вывод
матрица, слава Богу, я знаю, что такое
в языке JS матрица будет массивом массивов.
тобишь, это будет являться типичной матрицей размером 2х2
matrix = [ [1,2],[3,4] ];
у нас матрица 10х10.
итак,займемся её формированием.
// наша матрица
var matrix = [];
// её размеры. row-строка, col-столбец
var rows = 10, cols = 10;
var m = 1; // текст внутри ячейки.
var left = 1;// будет ли двигаться заполнение влево.(да)
for(var i=0,curr; i<rows; i++ ){
// текущая строка
curr = matrix[i] = [];
// формируем столбцы строки.
for( var b=0; b<cols; b++ ){
// заполняем массив в зав-ти от направления.
// и увеличиваем тект внутри ячейки
curr[ left ? "push":"unshift" ]( m++ );
}
*!*
// меняем направление с каждой строкой. toggler *см.сноску
left = left == false;
*/!*
}
насчёт красной строки. это тогглер (true,false,true,false....)
монолайтед в какой-то теме очень изящно шаманил с побитовыми операциями. буду рад, если он напишет вновь, как можно это сделать
теперь займёмся выводом. им я не стал заморачиваться. как быстрее - так и написал.
var s = '<table width="100%" height="100%">';
for( var i=0;i<matrix.length;i++ ){
s+= "<tr>";
for( var b=0;b<matrix[i].length;b++ )
s+= "<td>"+matrix[i][b]+"</td>";
s+="</tr>"
}
s+="</table>";
document.body.innerHTML = s;
итоговый скрипт будет таким. живой пример. он же лежит на
jsfiddle
<body></body>
<script>
// наша матрица
var matrix = [];
// её размеры. row-строка, col-столбец
var rows = 10, cols = 10;
var m = 1; // текст внутри ячейки.
var left = 1;// будет ли двигаться заполнение влево.(да)
for(var i=0,curr; i<rows; i++ ){
// текущая строка
curr = matrix[i] = [];
// формируем столбцы строки.
for( var b=0; b<cols; b++ ){
// заполняем массив в зав-ти от направления.
// и увеличиваем тект внутри ячейки
curr[ left ? "push":"unshift" ]( m++ );
}
// меняем направление с каждой строкой.
left = left == false;
}
/* --- ВЫВОД --- */
var s = '<table width="100%" height="100%">';
for( var i=0;i<matrix.length;i++ ){
s+= "<tr>";
for( var b=0;b<matrix[i].length;b++ )
s+= "<td>"+matrix[i][b]+"</td>";
s+="</tr>"
}
s+="</table>";
document.body.innerHTML = s;
</script>