"TR"의 CSS 스타일에서 선택한 행을 강조 표시에서 단추 기능을 제외하려면 어떻게해야합니까?

자말 루딘

Hy, 맞춰보세요. 내가 보여줄 코드의 조각 라인이 있습니다. 올바른 답을 주시길 바랍니다. 첫째로 나는이 CSS 코드 라인의 구조가 같은 것으로 보이는이있다 :

<style type='text/css'>
.gridview {
    display: inline-block;
    border-collapse: collapse;
    margin: 0px 4px 4px 0;
    box-shadow: 3px 3px 4px #bbb;
}

.gridview, .gridview td {
    margin: 0;
    border:  1px solid #cccccc;
}

.gridview tr {
    background: #F4F9FD;
}

.gridview tr:nth-child(odd) {
    background-color: #EDF5FC;
}

.gridview tr:nth-child(even) {
    background-color: #F4F9FD;
}

.gridview td {
    font-weight: normal;
    text-align: left;
    vertical-align: middle;
}

.gridview td {
    padding: 4px 10px 5px 9px;
}

.gridview tr:hover td, .gridview tbody tr:hover td {
    background-color: #feb4cc;
    cursor: pointer;
    color: white;
}

.gridview .selected, .gridview tbody .selected {
    background-color: #E74C3C;
    color: #fff;
}

button {
    display: none;
}

td:hover button {
    display: block;
    margin: -1px -8px 0px 0px;
    padding: 0px 2px 0px 2px;
    cursor: pointer;
    float: right;
}
</style>


두 번째로 나는 저 작은 조금이 자바 스크립트 같은 등을 :

function highlight(e) {
  if (e.className == 'selected') {
    e.className = e.className.replace('selected', '');}
      else {
        e.className += 'selected';
    }
}

function toClipboard(e) {
  var cell = e.parentNode,
      copyText = cell.getElementsByTagName('span'),
      selection = window.getSelection(),
      range = document.createRange();
    range.selectNodeContents(copyText[0]);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('copy');
}
</script>


그리고 마지막으로 세 번째HTML의 내용이 아래 아래에서 볼 수 :

<table border=1 class='gridview'>
    <colgroup>
        <col width='135'/>
        <col width='130'/>
        <col width='250'/>
    </colgroup>

        <tr OnClick=highlight(this)>
            <td><span>Row 1 Column 1 of Loren Ipsum</span><button onclick=toClipboard(this)><small>Copy</small></button></td>
            <td><span>Row 1 Column 2 of Loren Ipsum</span><button onclick=toClipboard(this)><small>Copy</small></button></td>
            <td><span>Row 1 Column 3 of Loren Ipsum</span><button onclick=toClipboard(this)><small>Copy</small></button></td>
        </tr>

        <tr OnClick=highlight(this)>
            <td><span>Row 2 Column 1 of Loren Ipsum</span><button onclick=toClipboard(this)><small>Copy</small></button></td>
            <td><span>Row 2 Column 2 of Loren Ipsum</span><button onclick=toClipboard(this)><small>Copy</small></button></td>
            <td><span>Row 2 Column 3 of Loren Ipsum</span><button onclick=toClipboard(this)><small>Copy</small></button></td>
        </tr>
</table>


문제는 동시에 실행되는 toClipboard () 함수 의 버튼을 클릭했을 때 선택한 행 강조 표시를 포함하지 않으려는 경우 방법입니다 ???

어쨌든이 트레드를 읽는 데 시간을 내 주셔서 미리 감사 드리며 한 번 더 감사드립니다. 불쌍한 영어에 대해 죄송합니다 ...

디에고

함수 event.stopPropagation()끝에 사용 하여 toClipboard()"현재 이벤트의 추가 전파"를 방지합니다.

function toClipboard(e) {
  var cell = e.parentNode,
      copyText = cell.getElementsByTagName('span'),
      selection = window.getSelection(),
      range = document.createRange();
    range.selectNodeContents(copyText[0]);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('copy');
    event.stopPropagation(); // This prevents highlight(e) from being called
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관