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

Question

Hy, Guess. I have the pieces line of the codes the bit of mine I will show you. I'll hope you'll be give me the right answer. Firstly I have the CSS code where the structure of lines has being looks like this :

<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>

the Secondly I have a litle bit the JavaScript such as like this :

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>

And the finally the Thirdly of the HTML content see at the down below this :

<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>

The Problems is How to if I don't want to including the Highlighting selected rows when I clicked the button of toClipboard() function running at the same time ???

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

Use event.stopPropagation() at the end of your toClipboard() function to prevent "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
}