如何从 "TR" 的 css 样式中突出显示所选行中排除按钮功能？

Question

嘿，猜猜。我有我的部分代码，我会告诉你。我希望你能给我正确的答案。首先我有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>

其次我有一点JavaScript比如这样:

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>

最后 Thirdly 的 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()同时函数运行???

Anyway thanks in advance was taken of your time to read this tread and any help will be appreciate thanks one more time and sorry about my poor english ...

Answer 1

在 toClipboard() 函数的末尾使用 event.stopPropagation() 来防止 "further propagation of the current event"。

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
}

如何从 "TR" 的 css 样式中突出显示所选行中排除按钮功能？

How to I can exclude the button function from the highlight selected rows on the css style of "TR"?

css

spreadsheet

stylesheet

google-sheets

google-apps-script