Всем привет!
Задача: Добавить столбцы к таблице. Если количество столбцов == 10, то прекратить добавление и выполнить определенные действия. Вот что я изобрел:
var addCol = document.body;
addCol.onclick = function() {
var table = document.querySelectorAll('table')[0];
var rows = table.querySelectorAll('tr');
var col = table.querySelectorAll('td');
for (var i = 0; i < table.rows.length; i++) {
var newCol = col[i].cloneNode(true);
rows[i].appendChild(newCol);
if(rows[i].col.length == 10) {
console.log(rows[i].col.length);
}
}
}
body,
html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-size: 14px;
font-family: "Segoe UI";
}
* {
box-sizing: border-box;
}
section {
padding: 15px 30px 15px 372px;
min-height: 100%;
}
.b-matrix {
position: relative;
margin: 0 30px 25px 0;
padding: 3px;
border-left: 2px solid #444;
border-right: 2px solid #444;
position: relative;
display: inline-block;
/*float: left;*/
}
/*------- [ ] -------*/
.b-matrix_border:before,
.b-matrix_border:after,
.b-matrix__table_border:before,
.b-matrix__table_border:after {
position: absolute;
display: block;
width: 8px;
height: 2px;
background: #444;
content: '';
}
.b-matrix_border:before {
top: 0;
left: 0;
}
.b-matrix_border:after {
top: 0;
right: 0;
}
.b-matrix__table_border:before {
bottom: 0;
left: 0;
}
.b-matrix__table_border:after {
bottom: 0;
right: 0;
}
/*----- // [ ] // -----*/
.matrix-name-A,
.matrix-name-B {
position: absolute;
font-size: 25px;
}
.matrix-name-A {
top: 50%;
right: -30px;
margin-top: -13px;
}
.matrix-name-B {
bottom: -30px;
left: 50%;
margin-top: 0;
margin-left: -6px;
}
.matrix-cell {
display: block;
width: 40px;
height: 40px;
margin: 5px;
border: 1px solid #ddd;
text-align: center;
}
.matrix-cell:hover {
/*добавить стили*/
}
.matrix-cell:focus {
border-color: #09d;
outline: 2px solid #09d;
}
.matrix-cell[disabled] {
background: #eee;
}
.matrix-cell[disabled]:hover {
border-color: #ddd;
outline: none;
}
<section>
<div class="b-matrix b-matrix_border" data-name="a">
<table class="b-matrix__table b-matrix__table_border">
<tr>
<td>
<input class="matrix-cell" type="text" value="" />
</td>
<td>
<input class="matrix-cell" type="text" value="" />
</td>
</tr>
<tr>
<td>
<input class="matrix-cell" type="text" value="" />
</td>
<td>
<input class="matrix-cell" type="text" value="" />
</td>
</tr>
<tr>
<td>
<input class="matrix-cell" type="text" value="" />
</td>
<td>
<input class="matrix-cell" type="text" value="" />
</td>
</tr>
<tr>
<td>
<input class="matrix-cell" type="text" value="" />
</td>
<td>
<input class="matrix-cell" type="text" value="" />
</td>
</tr>
<tr>
<td>
<input class="matrix-cell" type="text" value="" />
</td>
<td>
<input class="matrix-cell" type="text" value="" />
</td>
</tr>
</table>
</div>
<br />
</section>
В итоге, столбцы добавляются, но если я ниже прописываю условие, то происходит какая-то ерунда, а именно - добавляются столбцы только в первую строку таблицы, при этом условие не срабатывает.
Еще один момент: консоль выдает сообщение "Cannot read property 'appendChild' of undefined". Почему?
Просьба подсказать, где я лажаю. Может быть есть какие-то тонкости, которые я не учитываю/не знаю ...?
rows[i]
- будет undefined если в разметке меньше 10 элементовtr
– Grundy♦ 22 июн '16 в 8:48