javascript 我怎样才能对齐我的表，一个在一个表下拉数据交叉池塘与表标题

fkvaft9z 于 2023-03-16 发布在 Java

关注(0)|答案(1)|浏览(98)

我有一个表中的表是我的其他表是由下拉举行的数据，当页面加载我的数据必须隐藏，只有当你点击它出现。我怎么能对齐数据是由下拉举行交叉池塘与标题标题标题表。表的设计应该看起来像我的输出我提供的一个。这是我所尝试的：

const dropdownHeaders = document.querySelectorAll('.dropdown');
    dropdownHeaders.forEach(header => {
        header.addEventListener('click', () => {
            const dropdownContent = header.querySelector('.dropdown-content');
            dropdownContent.classList.toggle('show');
        });
    });

    window.addEventListener('click', (event) => {
        dropdownHeaders.forEach(header => {
            const dropdownContent = header.querySelector('.dropdown-content');
            if (event.target !== header && event.target.parentNode !== header && event.target !== dropdownContent && !dropdownContent.contains(event.target)) {
                dropdownContent.classList.remove('show');
            }
        });
    });

#mytable {
        float: right;
        background-color: white;
        border-collapse: collapse;
        margin-right: 45px;
        margin-left: -40px;
    }

    .fixTableHead {
        overflow-y: auto;
        height: 420px;
        margin-top: 6%;
    }

    .fixTableHead thead th {
        position: sticky;
        top: 0;
    }

    td {
        text-align: left;
        color: #898C9A;
        height: 85px;
        border: none;
        cursor: pointer;
    }

    th {
        background-color: rgb(255, 255, 255);
        border: none;
        height: 72px;
        text-align: left;
        font-weight: normal;
        color: #898C9A;
        cursor: pointer;
    }

    .tb {
        box-shadow: 0px 3px 10px 0px rgb(236, 240, 241);
    }

    .tb:hover {
        background-color: #7C99AA;
        color: white;
    }

    .tb:hover td {
        color: white;
    }

    input[type=text] {
        float: center;
        padding: 4px 20px;
        margin-top: 8px;
        margin-right: 16px;
        font-size: 2px;
    }

    .input-icons i {
        position: absolute;
        color: #898C9A;
        margin: 113px 180px 180px 95px;
        z-index: 3;
        cursor: pointer;

    }

    .input-icons {
        width: 40;
        margin-bottom: -30px;
    }

    .icon {
        padding: 5px;
        color: #898C9A;
        min-width: 100px;
        text-align: left;
        margin-left: 10px;

    }

    #input-field {
        width: 15%;
        padding: 8px 12px;
        text-align: left;
        font-style: italic;
        color: #898C9A;
        background-color: #F8F8FB;
        transform: translate(25%, 25%);
        margin-top: 100px;
        padding-left: 55px;
        border: 0;
        cursor: pointer;
        outline: none;

    }

    .input.field:hover {
        color: white;
    }

    .select {
        width: 50px;
        height: 20px;
        cursor: pointer;
        margin-left: 0.5vw;
        accent-color: #7C99AA;
    }

    .dropdown-action {
        width: 97.6%;
        background-color: #D8D9DD;
        color: #898C9A;
        padding: 0.4em 0.3em;
        border-radius: 0.25em 0.25em 0em 0em;
        cursor: pointer;
        display: flex;
        align-items: left;

    }

    .dropdown {
        position: relative;
        display: inline-block;
        width: 2269.2%;
        height: 25px;
        background-color: #D8D9DD;
        color: #898C9A;
        margin-top: 50px;
        text-align: left;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        width: 56.7%;
        top: 100%;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
    table {
  width: 100%;
}

<body>
    <div class="fixTableHead">
        <table id="mytable" style="width:94%" class="table table-striped mt32 customers-list">
            <thead>
                <tr class="tb">
                    <th style="width: 4vw;"></th>
                    <th style="width:2.5vw;">#</th>
                    <th>student name</th>
                    <th>surname</th>
                    <th>course</th>
                    <th>start date</th>
                    <th>end date</th>
                    <th>pass mark</th>
                    <th>remark</th>
                </tr>
            </thead>
            <tr class="tbTable">
                <th class="dropdown" colspan="9">
                    <span><i class="mdi mdi-menu-down">Student</i></span>
                    <div class="dropdown-content">
                        <table  style="width:94%" class="table table-striped mt32 customers-list">
                            <tr id="record-1" class="tb rowSelect">
                                <td><input class="select" id="select_0" type="checkbox" record="record-1" name="chk"></td>
                                <td>1</td>
                                <td>Lucky</td>
                                <td>Daniel</td>
                                <td>Software Development</td>
                                <td>26 Jan 2022</td>
                                <td>06 Jun 2023</td>
                                <td></td>
                                <td>NO</td>
                            </tr>
                            <tr id="record-3" class="tb rowSelect">
                                <td><input class="select" id="select_1" type="checkbox" record="record-3" name="chk"></td>
                                <td>2</td>
                                <td>Deon</td>
                                <td>James</td>
                                <td>Networking</td>
                                <td>26 Jan 2022</td>
                                <td>20 Nov 2023</td>
                                <td></td>
                                <td>Yes</td>
                            </tr>
                        </table>
                    </div>
                </th>
            </tr>
        </table>
    </div>
</body>

JavaScript

来源：https://stackoverflow.com/questions/75730840/how-can-i-align-my-table-that-a-within-a-table-dropdown-data-to-cross-pond-with

1条答案

按热度按时间

nnsrf1az1#

我希望这就是你想要的

const dropdownHeaders = document.querySelectorAll('.dropdown');
dropdownHeaders.forEach(header => {
    header.addEventListener('click', () => {
        const dropdownContent = header.querySelector('.dropdown-content');
        dropdownContent.classList.toggle('show');
    });
});

window.addEventListener('click', (event) => {
    dropdownHeaders.forEach(header => {
        const dropdownContent = header.querySelector('.dropdown-content');
        if (event.target !== header && event.target.parentNode !== header && event.target !== dropdownContent && !dropdownContent.contains(event.target)) {
            dropdownContent.classList.remove('show');
        }
    });
});

#mytable {
  float: right;
  background-color: white;
  border-collapse: collapse;
  margin-right: 45px;
  margin-left: -40px;
}

.fixTableHead {
  overflow-y: auto;
  height: 420px;
  margin-top: 6%;
}

.fixTableHead thead th {
  position: sticky;
  top: 0;
}

td {
  width: 11.11%;
  text-align: left;
  color: #898c9a;
  height: 85px;
  border: none;
  cursor: pointer;
}

th {
  width: 11.11%;
  background-color: rgb(255, 255, 255);
  border: none;
  height: 72px;
  text-align: left;
  font-weight: normal;
  color: #898c9a;
  cursor: pointer;
}

.tb {
  box-shadow: 0px 3px 10px 0px rgb(236, 240, 241);
}

.tb:hover {
  background-color: #7c99aa;
  color: white;
}

.tb:hover td {
  color: white;
}

input[type="text"] {
  float: center;
  padding: 4px 20px;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 2px;
}

.input-icons i {
  position: absolute;
  color: #898c9a;
  margin: 113px 180px 180px 95px;
  z-index: 3;
  cursor: pointer;
}

.input-icons {
  width: 40;
  margin-bottom: -30px;
}

.icon {
  padding: 5px;
  color: #898c9a;
  min-width: 100px;
  text-align: left;
  margin-left: 10px;
}

#input-field {
  width: 15%;
  padding: 8px 12px;
  text-align: left;
  font-style: italic;
  color: #898c9a;
  background-color: #f8f8fb;
  transform: translate(25%, 25%);
  margin-top: 100px;
  padding-left: 55px;
  border: 0;
  cursor: pointer;
  outline: none;
}

.input.field:hover {
  color: white;
}

.select {
  width: 50px;
  height: 20px;
  cursor: pointer;
  margin-left: 0.5vw;
  accent-color: #7c99aa;
}

.dropdown-action {
  width: 97.6%;
  background-color: #d8d9dd;
  color: #898c9a;
  padding: 0.4em 0.3em;
  border-radius: 0.25em 0.25em 0em 0em;
  cursor: pointer;
  display: flex;
  align-items: left;
}

.dropdown {
  position: relative;
  /* display: inline-block; */
  /* width: 920%; */
  height: 25px;
  background-color: #d8d9dd;
  color: #898c9a;
  margin-top: 50px;
  text-align: left;
}

.dropdown-content {
  display: none;
  position: absolute;
  width: 100%;
  top: 100%;
}

.dropdown:hover .dropdown-content {
  display: block;
}
table {
  width: 100%;
}

/* new */
.empty {
  display: block;
  height: 50px;
}

<div class="fixTableHead">
      <table
        id="mytable"
        style="width: 94%"
        class="table table-striped mt32 customers-list"
      >
        <thead>
          <tr class="tb">
            <th></th>
            <th>#</th>
            <th>student name</th>
            <th>surname</th>
            <th>course</th>
            <th>start date</th>
            <th>end date</th>
            <th>pass mark</th>
            <th>remark</th>
          </tr>
        </thead>
        <tbody>
          <!-- new row -->
          <tr>
            <th class="empty" colspan="9"></th>
          </tr>
          <tr class="tbTable">
            <th class="dropdown" colspan="9">
              <span><i class="mdi mdi-menu-down">Student</i></span>
              <div class="dropdown-content">
                <table
                  class="table table-striped mt32 customers-list"
                >
                  <tr id="record-1" class="tb rowSelect">
                    <td>
                      <input
                        class="select"
                        id="select_0"
                        type="checkbox"
                        record="record-1"
                        name="chk"
                      />
                    </td>
                    <td>1</td>
                    <td>Lucky</td>
                    <td>Daniel</td>
                    <td>Software Development</td>
                    <td>26 Jan 2022</td>
                    <td>06 Jun 2023</td>
                    <td></td>
                    <td>NO</td>
                  </tr>
                  <tr id="record-3" class="tb rowSelect">
                    <td>
                      <input
                        class="select"
                        id="select_1"
                        type="checkbox"
                        record="record-3"
                        name="chk"
                      />
                    </td>
                    <td>2</td>
                    <td>Deon</td>
                    <td>James</td>
                    <td>Networking</td>
                    <td>26 Jan 2022</td>
                    <td>20 Nov 2023</td>
                    <td></td>
                    <td>Yes</td>
                  </tr>
                  
                </table>
              </div>
            </th>
          </tr>
          
        </tbody>
      </table>
    </div>

赞(0）回复(0）举报 2023-03-16

我来回答

javascript 我怎样才能对齐我的表，一个在一个表下拉数据交叉池塘与表标题

1条答案

相关问题

热门标签

最新问答