I'm changing the tables to places, and the number of lines is constant



  • Hello, everyone.

    Two questions:

    1. 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...?
    2. 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, alert check by parent div:

    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>


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2