Question

在JavaScript中，如何从红色边框的顶部获得正确的偏移位置？基本上，我希望“ selected”类在下一列中将选中标记对齐，该标记通过获取红色边框的偏移量以粗体显示。

目前，它只是获取td的位置（这是选定元素所在的父级），但我希望它成为tbody。

查看笔：https://codepen.io/billy-hunter/pen/ebvKEV

#familyGroupModal .probTable tbody {
  position: relative;
  border: 5px solid red;
}

#familyGroupModal .probTable td.relationship-match {
  padding: 0;
  margin: 0;
}

#familyGroupModal .probTable .iconCheck:before {
  color: #6BA410;
}

#familyGroupModal .probTable .viewRelLink {
  padding-left: 25px;
}

#familyGroupModal .probTable .selected {
  font-weight: bold;
}

#familyGroupModal .probTable .matchedArea {
  position: relative;
  top: 0;
  right: 0;
  border: 1px solid blue;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Modal</title>
  <meta name="description" content=" " />
  <link rel="stylesheet" href="https://www.ancestrycdn.com/ui/2.0.0-rc.4/css/core.css" />

</head>

<body>

  <button class="ancBtn" id="modal-btn1" type="button">Open Modal</button>
  <div id="familyGroupModal" class="modal modalHasTitle">
    <header class="modalHeader">
      <h4 class="modalTitle">test</h4>
    </header>


    <table class="table topSpacingBlock probTable">
      <thead>
        <tr>
          <th scope="col" abbr="Name">Probability</th>
          <th scope="col" abbr="Relationship">Relationship</th>
          <th scope="col" abbr="Relationship Match"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="probability" class="text2xlrg bold">50%</td>
          <td data-label="relationship">
            <div>Jane Doe</div>
            <div>Jaeenen Doe</div>
            <div>Jimmy Doe</div>
            <div>Julie</div>
          </td>
          <td class="relationship-match">
            <div class="matchedArea">
              <span class="icon iconCheck"></span>
              <span class="hide480 bold">Match</span>
              <p class="noTopSpacing viewRelLink hide480"><a href="#">View</a></p>
            </div>
          </td>
        </tr>
        <tr>
          <td data-label="probability" class="text2xlrg bold">40%</td>
          <td data-label="relationship">
            <div>Jane Doe</div>
            <div>Jenny Doe</div>
            <div class="selected">Joeneys Doe</div>
            <div>Jerry Donor</div>
          </td>
          <td class="relationship-match"></td>
        </tr>
        <tr>
          <td data-label="probability" class="text2xlrg bold">7%</td>
          <td data-label="relationship">
            <div>Julie Doe</div>
            <div>Jamie Doo</div>
            <div>Jan Doe</div>
            <div>Janiee Dooo</div>
          </td>
          <td data-label="relationship-match"></td>
        </tr>
        <tr>
          <td data-label="probability" class="text2xlrg bold">3%</td>
          <td data-label="relationship">
            <div>Jery Doe</div>
            <div>James Dooo</div>
            <div>Janeeie</div>
            <div>Jenny Down</div>
          </td>
          <td data-label="relationship-match"></td>
        </tr>
      </tbody>
    </table>

  </div>

  <script src="https://www.ancestrycdn.com/ui/2.0.0-rc.4/js/core.js"></script>

  <script>
    const familyGroupModal = ui.modal('#familyGroupModal', {

    });
    familyGroupModal.open();
    document.getElementById('modal-btn1').addEventListener('click', () => {
      familyGroupModal.open();
    });

    //add 'selected' class to relationship that matches, and offset the top of parent element.
    const selectedElem = document.querySelector('.selected');
    const parentElem = document.querySelector('.probTable tbody');
    const matchedArea = document.querySelector('.matchedArea');

    if (selectedElem) {
      matchedArea.style.top = selectedElem.offsetTop + "px";
      //console.log(selectedElem.offsetParent.offsetParent.offsetTop);
    } else {
      matchedArea.className = 'noDisplay';
    }
  </script>
</body>

</html>

查找父母的最高偏移

0 个答案: