>

기본 테두리가있는 간단한 테이블을 만들고 td 에서 '호버'이벤트를 가져오고 싶습니다.  아마도 jquery에 의해 발생하는 요소 :

a) 상단 테두리는 중간에 빈 공간이있는 검은 색이어야합니다

b) 국경 중간에 p 의 텍스트가 표시되어야합니다.  그 td 의 요소 (텍스트는 풍선과 이전 요소 사이에 위치해야합니다)

결과는 다음과 같아야합니다 (호버링 된 요소를 다른 색상으로 표시) :

확실하지는 않지만 CSS를 사용하여 수행하는 것이 불가능할 수도 있습니다. 단순히 예제를 구현하려고 시도했지만 작동하지 않습니다. 아이디어는 상단 경계를 모방하기 위해 두 개의 div를 만들고 p 를 만드는 것이 었습니다.  요소. 문제는 div가 항상 보이지 않기 때문에 (정상적인 td 를 대체해야 함)  요소를 가리킬 때 테두리), 나는 또한 p 를 배치하는 방법을 모른다  필요에 따라 요소.

어떻게 올바른 솔루션을 얻을 수 있습니까?

$(document).ready(function() {
  var tableBodyContent = "";
  for (var i = 0; i < 10; i++) {
    tableBodyContent += '<tr>' +
      '<td><div class="myTopBorder"><div class="myBorder leftBorder"></div><div class="myBorder rightBorder"></div></div><p class="myText" value="' + i + ':00">ok</p>Item ' + i + '</td>' +
      '<td><div class="myTopBorder"><div class="myBorder leftBorder"></div><div class="myBorder rightBorder"></div></div><p class="myText" value="' + i + ':00">ok</p>Item ' + i + '</td>' +
      '<td><div class="myTopBorder"><div class="myBorder leftBorder"></div><div class="myBorder rightBorder"></div></div><p class="myText" value="' + i + ':00">ok</p>Item ' + i + '</td>' +
      '<td><div class="myTopBorder"><div class="myBorder leftBorder"></div><div class="myBorder rightBorder"></div></div><p class="myText" value="' + i + ':00">ok</p>Item ' + i + '</td>' +
      '<td><div class="myTopBorder"><div class="myBorder leftBorder"></div><div class="myBorder rightBorder"></div></div><p class="myText" value="' + i + ':00">ok</p>Item ' + i + '</td>' +
      '</tr>'
  }
  $("#timeTableBody").append(tableBodyContent);
});
$("td").hover(
  function() {
    $(this).find(".myBorder").each(function(index) {
      $(this).show();
    });
  },
  function() {
    $(this).find(".myBorder").each(function(index) {
      $(this).hide();
    });
  }
);

table {
  border: none;
  border-collapse: collapse;
  padding: 0;
  margin: 0;
}
th,
td {
  width: 45px;
  height: 20px;
  padding: 10px;
}
.myTopBorder {
  height: 1px;
  width: 100%;
}
.leftBorder,
.rightBorder {
  height: 100%;
  width: 30%;
  display: none;
}
.leftBorder {
  float: left;
}
.rightBorder {
  float: right;
}
th {
  border: 1px solid black;
}
td {
  border-top: 1px solid lightgrey;
  border-left: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
}
td:hover {
  border: none;
}
.myText {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
    </tr>
  </thead>
  <tbody id="timeTableBody">
  </tbody>
</table>

  • 답변 # 1

    필요한 것은 CSS 만 사용하여 수행 할 수 있습니다. data 에서 호버에 표시 할 값을 배치하여   td 의 속성   attr() 를 사용하여 psuedo 요소의 내용을 쉽게 읽을 수 있습니다. . 그런 다음 비슷한 기술을 사용하여 다음과 같이 호버에서 테두리의 왼쪽과 오른쪽을 만들 수 있습니다.

    $(document).ready(function() {
      var tableBodyContent = '';
      for (var i = 0; i < 10; i++) {
        var rowArr = (new Array(5)).fill('<td data-hover="' + i + ':00"><i></i><p class="item">Item ' + i + '</p></td>', 0, 5);
        tableBodyContent += '<tr>' + rowArr.join('') + '</tr>'
      }
      $("#timeTableBody").append(tableBodyContent);
    });
    
    

    table {
      border-collapse: collapse;
      padding: 0;
      margin: 0;
      background-color: #EFEFEF;
    }
    th,
    td {
      width: 45px;
      height: 20px;
      padding: 10px;
    }
    th {
      border: 1px solid black;
      border-bottom: 0;
    }
    td {
      border: 1px solid lightgrey;
      border-bottom: 0;
      position: relative;
    }
    td i:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 16px;
      height: 1px;
      background-color: #000;
      display: none;
    }
    td i:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 16px;
      height: 1px;
      background-color: #000;
      display: none;
    }
    td:before {
      content: attr(data-hover);
      position: absolute;
      top: -7px;
      left: 18px;
      width: 30px;
      font-size: 0.8em;
      text-align: center;
      display: none;
    } 
    td:hover {
      border-top-color: transparent !important;
      background-color: #DEDEDE;
    }
    td:hover p {
      display: none;
    }
    td:hover:before,
    td:hover i:before,
    td:hover i:after {
      display: block;
    }
    tbody tr:nth-child(1) td {
      border-top-color: #000;
    }
    
    

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table>
      <thead>
        <tr>
          <th>Mon</th>
          <th>Tue</th>
          <th>Wed</th>
          <th>Thu</th>
          <th>Fri</th>
        </tr>
      </thead>
      <tbody id="timeTableBody"></tbody>
    </table>
    
    

  • 답변 # 2

    content: attr(data-value) 를 사용할 수 있습니다  이렇게 :

    전체 CSS 및 가장 짧은 솔루션 :

    $(document).ready(function() {
      for (let i = 0, $tr; i < 10; i++) {
        $tr = $("<tr></tr>")
          .appendTo("#timeTableBody");
        for (var day = 0; day < 5; day++)
          $("<td></td>")
          .attr("data-value", i + ":00")
          .text("Item " + i)
          .appendTo($tr);
      }
    });
    
    

    table {
      border: none;
      border-collapse: collapse;
      padding: 0;
      margin: 0;
    }
    th,
    td {
      width: 45px;
      height: 20px;
      padding: 10px;
    }
    th {
      border: 1px solid black;
    }
    td {
      border: 1px solid lightgrey;
      position: relative;
    }
    td:hover::after {
      content: attr(data-value);
      position: absolute;
      bottom: -8px;
      line-height: 12px;
      font-size: 12px;
      background: white;
      padding: 2px;
    }
    
    

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table>
      <thead>
        <tr>
          <th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th>
        </tr>
      </thead>
      <tbody id="timeTableBody">
      </tbody>
    </table>
    
    

  • 답변 # 3

    다음과 같이 컨텐츠에 의사 요소 및 데이터 속성을 사용할 수 있습니다.

    table {
      border: none;
      border-collapse: collapse;
      padding: 0;
      margin: 0;
    }
    th,
    td {
      width: 45px;
      height: 20px;
      padding: 10px;
    }
    th {
      border: 1px solid black;
    }
    td {
      border-top: 1px solid lightgrey;
      border-left: 1px solid lightgrey;
      border-right: 1px solid lightgrey;
      position: relative;
    }
    td::before {
      content: attr(data-text);
      position: absolute;
      z-index: 2;
      top: -5px;
      font-size: 10px;
      left: 0;
      right: 0;
      text-align: center;
      background: linear-gradient(green, green) center left/20px 1px, linear-gradient(green, green) center right/20px 1px;
      background-repeat: no-repeat;
      opacity: 0;
    }
    td:hover {
      border-top: 0;
      background: orange;
    }
    td:hover::before {
      opacity: 1;
    }
    
    

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table>
      <thead>
        <tr>
          <th>Mon</th>
          <th>Tue</th>
          <th>Wed</th>
          <th>Thu</th>
          <th>Fri</th>
        </tr>
      </thead>
      <tbody id="timeTableBody">
        <tr>
          <td data-text="3:00">Item 0</td>
          <td data-text="3:00">Item 0</td>
          <td data-text="3:00">Item 0</td>
          <td data-text="3:00">Item 0</td>
          <td data-text="3:00">Item 0</td>
        </tr>
        <tr>
          <td data-text="3:00">Item 0</td>
          <td data-text="3:00">Item 0</td>
          <td data-text="3:00">Item 0</td>
          <td data-text="3:00">Item 0</td>
          <td data-text="3:00">Item 0</td>
        </tr>
        <tr>
          <td data-text="3:00">Item 0</td>
          <td data-text="3:00">Item 0</td>
          <td data-text="3:00">Item 0</td>
          <td data-text="3:00">Item 0</td>
          <td data-text="3:00">Item 0</td>
        </tr>
      </tbody>
    </table>
    
    

  • 이전 python - 데이터 프레임에서 열 이름을 이전 이름과 비슷한 문자열로 바꿉니다
  • 다음 hadoop - SQL 함수의 일치하는 경우를 표시하기 위해 JOIN 및 GROUPBY를 사용하는 방법