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] 삭제
몇 마디 만하겠습니다