如何将表格添加到我制作的 HTML 中？答案

【问题标题】：How can I add a table into the HTML I made?如何将表格添加到我制作的 HTML 中？
【发布时间】：2020-06-25 03:10:28
【问题描述】：

我正在尝试在图像旁边添加一个由 2 行和 4 列组成的新表格，同时保留图像底部表格的 2 行和 4 列。（简单地说，在图像右侧添加一个新表格，同时保留底部表格，如您所见。）我没有整理表格内容，所以它不能按我的意愿工作，我知道我必须修复并且我尝试了不同的方式，但没有奏效。

我是 html 新手，所以表格的结构可能看起来没有条理，因为它包含很多 jQuery 的类和 id。

$(document).on('click', '.accordion-head', function() {
  $('.accordion-head').removeClass('open');
  if (!$(this).hasClass('open')) {
    $(this).addClass('open1');
  } else {
    $('.accordion-head').removeClass('open');
    $(this).addClass('close');
  }
  $('.accordion-body').slideUp("fast");
  $(this).next().slideDown("fast");

  $(document).on('dblclick', '.accordion-head', function() {

    if (!$(this).hasClass('open')) {
      $('.accordion-head').removeClass('open1');
    } else {
      $('.accordion-head').removeClass('open');
      $(this).addClass('close');
    }
    $('.accordion-body').slideUp("fast");
  });
});

.outer {
  width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.main-title {
  margin-top: 35px;
  font-size: 20px;
  font-weight: 900;
}

hr.garo {
  border: 1px solid #757272;
  margin: 17px 0px 0px 0px;
}

#tableMain {
  width: 800px;
  border: 1px solid lightgray;
  border-left: none;
  border-right: none;
  border-collapse: separate;
  border-spacing: 0px;
  margin-top: 40px;
  text-align: center;
}

table {
  width: 100%;
}

th {
  margin-top: 10px;
  background: lightgray;
  box-sizing: border-box;
}

th,
td {
  text-align: center;
  border: 1px solid lightgray;
  border-left: none;
  border-right: none;
}

#pop {
  border: 1px solid lightgray;
  font-size: 10px;
  text-align: left
}

#tableMain>img {
  display: block;
  width: 200px;
  height: 100px;
  justify-content: center;
}

#bor {
  border: 1px solid gray;
  text-align: left;
  font-weight: bold;
}

.pay {
  text-align: left;
  font-weight: bold;
  background-color: rgba(211, 211, 211, 0.418);
}

.breakrow {
  border: 1px solid lightgray;
  margin-top: 10px;
  margin-bottom: 10px;
}

input {
  background-color: #ffc107;
  color: white;
  border-radius: 2px;
}

#sep {
  border: 1px solid gray;
  border-collapse: collapse;
}

#space {
  margin-left: 20px;
  width: 60;
  height: 25px;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
  color: white;
}

.arrow {
  float: left;
  border: 10px solid transparent;
  margin-top: 10px;
  margin-left: 20px;
  border-top-color: lightgray;
  transition: 350ms;
  position: absolute;
}

.accordion-head.open {
  background: white;
}

.accordion-head.open1 {
  background: #eee;
}

.accordion-head.open .arrow {
  margin-top: -10px;
  transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="outer">
  <span class="main-title">예약 내역 조회</span>
  <hr class="garo">

  <table id="tableMain" class="accordion" style="text-align:center;">
    <thead>
      <tr>
        <th style="height:40px;">예약 번호</th>
        <th style="height:40px;">대여 기간</th>
        <th style="height:40px; padding-right:90px;">지점명</th>
      </tr>
    </thead>
    <tbody>
      <tr class="accordion-head breakrow open">
        <td>
          <div class="arrow"></div> 1</td>
        <td>2020.02.05 ~ 2020.02.07</td>
        <td>강남지점-강남지점 <input id="space" type="button" value="예약 취소" onclick=""></td>

      </tr>
      <tr class="accordion-body" style="display: none;">
        <td colspan="3">
          <table id="sep">
            <tbody>
              <tr id="pop">
                <td id="bor" rowspan="1" colspan="2"><img src="http://www.cctoday.co.kr/news/photo/201509/925979_306258_1646.jpg">

                </td>
              </tr>
              <tr id="pop">
                <td id="bor">차량 대여요금</td>
                <td style="border:1px solid gray">52,520원</td>
              </tr>
              <tr id="pop">
                <td id="bor">보험료</td>
                <td style="border:1px solid gray">52,520원</td>
              </tr>
              <tr id="pop">
                <td id="bor">쿠폰/이벤트</td>
                <td style="border:1px solid gray">52,520원</td>
              </tr>
              <tr id="pop">
                <td style="background-color:lightgray; border:1px solid gray;" id="bor">총 결제 금액</td>
                <td style="background-color:lightgray; border:1px solid gray;">52,520원</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <!-- Number #2 -->
      <tr class="accordion-head breakrow open">
        <td>
          <div class="arrow"></div> 1</td>
        <td>2020.02.05 ~ 2020.02.07</td>
        <td style="text-align:center;">강남지점-강남지점 <input id="space" type="button" value="예약 취소" onclick=""></td>
      </tr>
      <tr class="accordion-body" style="display: none;">
        <td colspan="3">
          <table id="sep">
            <tbody>
              <tr id="pop">
                <td id="bor" rowspan="2"><img src="http://www.cctoday.co.kr/news/photo/201509/925979_306258_1646.jpg"></td>
              </tr>
              <tr id="pop">
                <td id="bor">차량 대여요금</td>
                <td style="border:1px solid gray">52,520원</td>
              </tr>
              <tr id="pop">
                <td id="bor">보험료</td>
                <td style="border:1px solid gray">52,520원</td>
              </tr>
              <tr id="pop">
                <td id="bor">쿠폰/이벤트</td>
                <td style="border:1px solid gray">52,520원</td>
              </tr>
              <tr id="pop">
                <td style="background-color:lightgray; border:1px solid gray;" id="bor">총 결제 금액</td>
                <td style="background-color:lightgray; border:1px solid gray;">52,520원</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr class="accordion-head breakrow open">
        <td>
          <div class="arrow"></div> 1</td>
        <td>2020.02.05 ~ 2020.02.07</td>
        <td>강남지점-강남지점 <input id="space" type="button" value="예약 취소" onclick=""></td>
      </tr>
      <tr class="accordion-body" style="display: none;">
        <td colspan="3">
          <table id="sep">
            <tbody>
              <tr id="pop">
                <td id="bor" rowspan="5" colspan="2"><img src="http://www.cctoday.co.kr/news/photo/201509/925979_306258_1646.jpg"></td>
              </tr>
              <tr id="pop">
                <td id="bor">차량 대여요금</td>
                <td style="border:1px solid gray">52,520원</td>
              </tr>
              <tr id="pop">
                <td id="bor">보험료</td>
                <td style="border:1px solid gray">52,520원</td>
              </tr>
              <tr id="pop">
                <td id="bor">쿠폰/이벤트</td>
                <td style="border:1px solid gray">52,520원</td>
              </tr>
              <tr id="pop">
                <td style="background-color:lightgray; border:1px solid gray;" id="bor" colspan="2">총 결제 금액</td>
                <td style="background-color:lightgray; border:1px solid gray;">52,520원</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr class="accordion-head breakrow open">
        <td>
          <div class="arrow"></div> 1</td>
        <td>2020.02.05 ~ 2020.02.07</td>
        <td>강남지점-강남지점 <input id="space" type="button" value="예약 취소" onclick=""></td>
      </tr>
      <tr class="accordion-body" style="display: none;">
        <td colspan="3">
          <table id="sep">
            <tbody>
              <tr id="pop">
                <td id="bor" colspan="0">
                  <img src="http://www.cctoday.co.kr/news/photo/201509/925979_306258_1646.jpg">
                </td>
                <td>asdasd</td>
              </tr>
              <tr id="pop">
                <td id="bor">차량 대여요금</td>
                <td style="border:1px solid gray">52,520원</td>
              </tr>
              <tr id="pop">
                <td id="bor">보험료</td>
                <td style="border:1px solid gray">52,520원</td>
              </tr>
              <tr id="pop">
                <td id="bor">쿠폰/이벤트</td>
                <td style="border:1px solid gray">52,520원</td>
              </tr>
              <tr id="pop">
                <td style="background-color:lightgray; border:1px solid gray;" id="bor">총 결제 금액</td>
                <td style="background-color:lightgray; border:1px solid gray;">52,520원</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

【问题讨论】：

我更新了我的答案，请查看，如果您有任何问题，请告诉我

标签： javascript jquery html css model-view-controller

【解决方案1】：

使用colspan，然后在td 中使用另一个表，其中包含2 个rows 和4 个col 在第一条记录中您可以检查。

$(document).on('click', '.accordion-head', function() {
  $('.accordion-head').removeClass('open');
  if (!$(this).hasClass('open')) {
    $(this).addClass('open1');
  } else {
    $('.accordion-head').removeClass('open');
    $(this).addClass('close');
  }
  $('.accordion-body').slideUp("fast");
  $(this).next().slideDown("fast");

  $(document).on('dblclick', '.accordion-head', function() {

    if (!$(this).hasClass('open')) {
      $('.accordion-head').removeClass('open1');
    } else {
      $('.accordion-head').removeClass('open');
      $(this).addClass('close');
    }
    $('.accordion-body').slideUp("fast");
  });
});

.outer {
  width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.main-title {
  margin-top: 35px;
  font-size: 20px;
  font-weight: 900;
}

hr.garo {
  border: 1px solid #757272;
  margin: 17px 0px 0px 0px;
}

#tableMain {
  width: 800px;
  border: 1px solid lightgray;
  border-left: none;
  border-right: none;
  border-collapse: separate;
  border-spacing: 0px;
  margin-top: 40px;
  text-align: center;
}

table {
  width: 100%;
}

th {
  margin-top: 10px;
  background: lightgray;
  box-sizing: border-box;
}

th,
td {
  text-align: center;
  border: 1px solid lightgray;
  border-left: none;
  border-right: none;
}

#pop {
  border: 1px solid lightgray;
  font-size: 10px;
  text-align: left
}

#tableMain>img {
  display: block;
  width: 200px;
  height: 100px;
  justify-content: center;
}

#bor {
  border: 1px solid gray;
  text-align: left;
  font-weight: bold;
}

.pay {
  text-align: left;
  font-weight: bold;
  background-color: rgba(211, 211, 211, 0.418);
}

.breakrow {
  border: 1px solid lightgray;
  margin-top: 10px;
  margin-bottom: 10px;
}

input {
  background-color: #ffc107;
  color: white;
  border-radius: 2px;
}

#sep {
  border: 1px solid gray;
  border-collapse: collapse;
}

#space {
  margin-left: 20px;
  width: 60;
  height: 25px;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
  color: white;
}

.arrow {
  float: left;
  border: 10px solid transparent;
  margin-top: 10px;
  margin-left: 20px;
  border-top-color: lightgray;
  transition: 350ms;
  position: absolute;
}

.accordion-head.open {
  background: white;
}

.accordion-head.open1 {
  background: #eee;
}

.accordion-head.open .arrow {
  margin-top: -10px;
  transform: rotate(180deg);
}
.sub-tbl {
    border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="outer">
  <span class="main-title">예약 내역 조회</span>
  <hr class="garo">

  <table id="tableMain" class="accordion" style="text-align:center;">
    <thead>
      <tr>
        <th style="height:40px;">예약 번호</th>
        <th style="height:40px;">대여 기간</th>
        <th style="height:40px; padding-right:90px;">지점명</th>
      </tr>
    </thead>
    <tbody>
      <tr class="accordion-head breakrow open">
        <td>
          <div class="arrow"></div> 1</td>
        <td>2020.02.05 ~ 2020.02.07</td>
        <td>강남지점-강남지점 <input id="space" type="button" value="예약 취소" onclick=""></td>

      </tr>
      <tr class="accordion-body" style="display: none;">
        <td colspan="3">
          <table id="sep">
            <tbody>
              <tr id="pop">
                <td id="bor" rowspan="1" colspan="2"><img src="http://www.cctoday.co.kr/news/photo/201509/925979_306258_1646.jpg">

                </td>
              </tr>
              <tr id="pop">
                <td id="bor">차량 대여요금</td>
                <td style="border:1px solid gray">52,520원</td>
              </tr>
              <tr id="pop">
                <td id="bor">보험료</td>
                <td style="border:1px solid gray">52,520원</td>
              </tr>
              <tr id="pop">
                <td id="bor">쿠폰/이벤트</td>
                <td style="border:1px solid gray">52,520원</td>
              </tr>
              <tr id="pop">
                <td style="background-color:lightgray; border:1px solid gray;" id="bor">총 결제 금액</td>
                <td style="background-color:lightgray; border:1px solid gray;">52,520원</td>
              </tr>
              <tr  id="pop">
                <td colspan="2" >
                  <table class="sub-tbl">
                    <tr>
                      <td >Alfreds Futterkiste</td>
                      <td >Maria Anders</td>
                      <td >Alfreds Futterkiste</td>
                      <td >Maria Anders</td>
                    </tr>
                    <tr>
                      <td >Centro comercial Moctezuma</td>
                      <td >Francisco Chang</td>
                      <td >Centro comercial Moctezuma</td>
                      <td >Francisco Chang</td>

                    </tr>

                    <tr>
                  </table>
                  </td>

                    </tr>
            </tbody>
          </table>
          </td>
          </tr>
          <!-- Number #2 -->
          <tr class="accordion-head breakrow open">
            <td>
              <div class="arrow"></div> 1</td>
            <td>2020.02.05 ~ 2020.02.07</td>
            <td style="text-align:center;">강남지점-강남지점 <input id="space" type="button" value="예약 취소" onclick=""></td>
          </tr>
          <tr class="accordion-body" style="display: none;">
            <td colspan="3">
              <table id="sep">
                <tbody>
                  <tr id="pop">
                    <td id="bor" rowspan="2"><img src="http://www.cctoday.co.kr/news/photo/201509/925979_306258_1646.jpg"></td>
                  </tr>
                  <tr id="pop">
                    <td id="bor">차량 대여요금</td>
                    <td style="border:1px solid gray">52,520원</td>
                  </tr>
                  <tr id="pop">
                    <td id="bor">보험료</td>
                    <td style="border:1px solid gray">52,520원</td>
                  </tr>
                  <tr id="pop">
                    <td id="bor">쿠폰/이벤트</td>
                    <td style="border:1px solid gray">52,520원</td>
                  </tr>
                  <tr id="pop">
                    <td style="background-color:lightgray; border:1px solid gray;" id="bor">총 결제 금액</td>
                    <td style="background-color:lightgray; border:1px solid gray;">52,520원</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr class="accordion-head breakrow open">
            <td>
              <div class="arrow"></div> 1</td>
            <td>2020.02.05 ~ 2020.02.07</td>
            <td>강남지점-강남지점 <input id="space" type="button" value="예약 취소" onclick=""></td>
          </tr>
          <tr class="accordion-body" style="display: none;">
            <td colspan="3">
              <table id="sep">
                <tbody>
                  <tr id="pop">
                    <td id="bor" rowspan="5" colspan="2"><img src="http://www.cctoday.co.kr/news/photo/201509/925979_306258_1646.jpg"></td>
                  </tr>
                  <tr id="pop">
                    <td id="bor">차량 대여요금</td>
                    <td style="border:1px solid gray">52,520원</td>
                  </tr>
                  <tr id="pop">
                    <td id="bor">보험료</td>
                    <td style="border:1px solid gray">52,520원</td>
                  </tr>
                  <tr id="pop">
                    <td id="bor">쿠폰/이벤트</td>
                    <td style="border:1px solid gray">52,520원</td>
                  </tr>
                  <tr id="pop">
                    <td style="background-color:lightgray; border:1px solid gray;" id="bor" colspan="2">총 결제 금액</td>
                    <td style="background-color:lightgray; border:1px solid gray;">52,520원</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr class="accordion-head breakrow open">
            <td>
              <div class="arrow"></div> 1</td>
            <td>2020.02.05 ~ 2020.02.07</td>
            <td>강남지점-강남지점 <input id="space" type="button" value="예약 취소" onclick=""></td>
          </tr>
          <tr class="accordion-body" style="display: none;">
            <td colspan="3">
              <table id="sep">
                <tbody>
                  <tr id="pop">
                    <td id="bor" colspan="0">
                      <img src="http://www.cctoday.co.kr/news/photo/201509/925979_306258_1646.jpg">
                    </td>
                    <td>asdasd</td>
                  </tr>
                  <tr id="pop">
                    <td id="bor">차량 대여요금</td>
                    <td style="border:1px solid gray">52,520원</td>
                  </tr>
                  <tr id="pop">
                    <td id="bor">보험료</td>
                    <td style="border:1px solid gray">52,520원</td>
                  </tr>
                  <tr id="pop">
                    <td id="bor">쿠폰/이벤트</td>
                    <td style="border:1px solid gray">52,520원</td>
                  </tr>
                  <tr id="pop">
                    <td style="background-color:lightgray; border:1px solid gray;" id="bor">총 결제 금액</td>
                    <td style="background-color:lightgray; border:1px solid gray;">52,520원</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
    </tbody>
  </table>
</div>

【讨论】：