I'm changing the tables to places, and the number of lines is constant
-
Hello, everyone.
Two questions:
- Why, when I change the tables to the seats, the number of lines in table A remains unchanged, because it (table A) was replaced by a table with fewer columns...?
- Why does alert(s) work sooner than the change of table locations, because it's alert(s) prescribed after the main code?
'use strict' var A = document.querySelector('.b-matrix[data-name="a"] table'), B = document.querySelector('.b-matrix[data-name="b"] table'), C = document.querySelector('.b-matrix[data-name="c"] table');document.body.onclick = function() {
var parentA = A.parentNode,
parentB = B.parentNode,
a = parentB.replaceChild(A, B);parentA.insertBefore(a, null);
alert(A.querySelectorAll('tr').length);
}.main {
padding: 15px 30px 0 30px;
overflow: auto;
}
.b-matrix {
position: relative;
margin: 0 30px 25px 0;
padding: 3px;
border-left: 2px solid #444;
border-right: 2px solid #444;
position: relative;
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;
}
/// -----/.b-matrix__table input {
display: block;
width: 40px;
height: 40px;
margin: 5px;
border: 1px solid #ddd;
text-align: center;
}<section class="main">
<div class="b-matrix b-matrix_border" data-name="c">
<table class="b-matrix__table b-matrix__table_border">
<tr>
<td>
<input type="text" value="" disabled />
</td>
<td>
<input type="text" value="" disabled />
</td>
</tr>
<tr>
<td>
<input type="text" value="" disabled />
</td>
<td>
<input type="text" value="" disabled />
</td>
</tr>
<tr>
<td>
<input type="text" value="" disabled />
</td>
<td>
<input type="text" value="" disabled />
</td>
</tr>
<tr>
<td>
<input type="text" value="" disabled />
</td>
<td>
<input type="text" value="" disabled />
</td>
</tr>
</table>
</div>
<div class="b-matrix b-matrix_border" data-name="a">
<table class="b-matrix__table b-matrix__table_border">
<tr>
<td>
<input type="text" value="" />
</td>
<td>
<input type="text" value="" />
</td>
</tr>
<tr>
<td>
<input type="text" value="" />
</td>
<td>
<input type="text" value="" />
</td>
</tr>
<tr>
<td>
<input type="text" value="" />
</td>
<td>
<input type="text" value="" />
</td>
</tr>
<tr>
<td>
<input type="text" value="" />
</td>
<td>
<input type="text" value="" />
</td>
</tr>
</table>
</div>
</section>
<section class="main">
<div class="b-matrix b-matrix_border" data-name="b">
<table class="b-matrix__table b-matrix__table_border">
<tr>
<td>
<input type="text" value="" />
</td>
<td>
<input type="text" value="" />
</td>
</tr>
<tr>
<td>
<input type="text" value="" />
</td>
<td>
<input type="text" value="" />
</td>
</tr>
</table>
</div>
</section>
-
I don't know why it works before, but if earlier,
alertcheck by parentdiv:alert(document.querySelector('.b-matrix[data-name="a"]').querySelectorAll('tr').length);'use strict' var A = document.querySelector('.b-matrix[data-name="a"] table'), B = document.querySelector('.b-matrix[data-name="b"] table'), C = document.querySelector('.b-matrix[data-name="c"] table');document.body.onclick = function() {
var parentA = A.parentNode,
parentB = B.parentNode,
a = parentB.replaceChild(A, B);parentA.insertBefore(a, null);
alert(document.querySelector('.b-matrix[data-name="a"]').querySelectorAll('tr').length);
}.main {
padding: 15px 30px 0 30px;
overflow: auto;
}
.b-matrix {
position: relative;
margin: 0 30px 25px 0;
padding: 3px;
border-left: 2px solid #444;
border-right: 2px solid #444;
position: relative;
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;
}
/// -----/.b-matrix__table input {
display: block;
width: 40px;
height: 40px;
margin: 5px;
border: 1px solid #ddd;
text-align: center;
}<section class="main">
<div class="b-matrix b-matrix_border" data-name="c">
<table class="b-matrix__table b-matrix__table_border">
<tr>
<td>
<input type="text" value="" disabled />
</td>
<td>
<input type="text" value="" disabled />
</td>
</tr>
<tr>
<td>
<input type="text" value="" disabled />
</td>
<td>
<input type="text" value="" disabled />
</td>
</tr>
<tr>
<td>
<input type="text" value="" disabled />
</td>
<td>
<input type="text" value="" disabled />
</td>
</tr>
<tr>
<td>
<input type="text" value="" disabled />
</td>
<td>
<input type="text" value="" disabled />
</td>
</tr>
</table>
</div>
<div class="b-matrix b-matrix_border" data-name="a">
<table class="b-matrix__table b-matrix__table_border">
<tr>
<td>
<input type="text" value="" />
</td>
<td>
<input type="text" value="" />
</td>
</tr>
<tr>
<td>
<input type="text" value="" />
</td>
<td>
<input type="text" value="" />
</td>
</tr>
<tr>
<td>
<input type="text" value="" />
</td>
<td>
<input type="text" value="" />
</td>
</tr>
<tr>
<td>
<input type="text" value="" />
</td>
<td>
<input type="text" value="" />
</td>
</tr>
</table>
</div>
</section>
<section class="main">
<div class="b-matrix b-matrix_border" data-name="b">
<table class="b-matrix__table b-matrix__table_border">
<tr>
<td>
<input type="text" value="" />
</td>
<td>
<input type="text" value="" />
</td>
</tr>
<tr>
<td>
<input type="text" value="" />
</td>
<td>
<input type="text" value="" />
</td>
</tr>
</table>
</div>
</section>
