0

I have a table that is generated using js. As far as I know, I cant add unique ids to the different cells.

My question is, is it possible to add a function that copies the content of one of the clicked elements that I could add to the cells to copy there content? or is there a way to add unique classes or ids to my cells and the enclosed divs using the js below?

I'm pretty new to js so if it's not too much trouble would you mind explaining any changes made to the code so I can better understand it?

any help is much appreciated!

tried this with no success:

$('.hex-color').on('click', function(){
  element = $(this).next('div');
  var selection = window.getSelection();
  var range = document.createRange();
  range.selectNodeContents(element);
  selection.removeAllRanges();
  selection.addRange(range);
    try {
       var successful = document.execCommand('copy');
      if(successful) {
        $('.res').html("Coppied");
      }
       else
       { $('.res').html("Unable to copy!");}
   } catch (err) {
      $('.res').html(err);
   }
});

function makeTableRowColors(colors, displayType) {
    var tableRow = "<tr>";
    for (var i = 0; i < colors.length; i++) {
        if (displayType == "colors") {
            tableRow += "<td class=\"hex-color tint-shade-box\"  style=\"background-color:" + "#" + colors[i].toString(16) + "\";><div style=\"background-color:" + "#" + colors[i].toString(16) + "\";>" + colors[i].toString(16).toUpperCase() + "</div></td>";
        }
    }
    tableRow += "</tr>";
    return tableRow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<td class="hex-color tint-shade-box" style="background-color:#f5f5f5">
<div style="background-color:#f5f5f5">F5F5F5</div>
</td>
<td class="hex-color tint-shade-box" style="background-color:#dddddd">
<div style="background-color:#dddddd">DDDDDD</div>
</td>
</tr>
Hariharan V.
  • 191
  • 1
  • 3
  • 18
Josh Stapleton
  • 1
  • 2
  • _As far as I know, I cant add unique ids to the different cells_ you can and you should. What will cause you issues is if you add the same id to different items in your page. but your first assumption is wrong – Lelio Faieta Aug 28 '19 at 09:40
  • `next` collects sibling elements, the div you're trying to catch is a child element of the clicked td. – Teemu Aug 28 '19 at 09:46
  • @LelioFaieta I know this would be possible if I was writing the HTML myself but I'm not sure how I would go about adding them using the JS code I have above. like I said, I'm pretty new to js and don't understand it that well yet. – Josh Stapleton Aug 28 '19 at 09:48
  • @Teemu okay, is there something I could use to collect the child? .childNode? – Josh Stapleton Aug 28 '19 at 09:52
  • You're far better off adding data attributes instead of ids to your markup. `data-id="1"` etc. – Andy Aug 28 '19 at 09:53
  • `this.firstElementChild` (no jQuery objects here) would fit to the provided HTML and the JS code using the element. – Teemu Aug 28 '19 at 09:56
  • @Andy thanks, but how would I have these increase in value for each td or div? e.g. data-id="1", data-id="2", data-id="3" ... – Josh Stapleton Aug 28 '19 at 09:57
  • @Teemu Thanks! ill give that a try. – Josh Stapleton Aug 28 '19 at 09:59
  • i think this is possible duplicate of https://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery – Sangita Kendre Aug 28 '19 at 10:15
  • @Teemu sorry if this is obvious but do you mean like this? element = this.firstElementChild; – Josh Stapleton Aug 28 '19 at 10:16
  • Yes, that gives you the first child element of the clicked element, when the click event is attached to the TD itself. If you have delegated the event, use `event.target` instead of `this`. Notice, that `range.selectNodeContents` doesn't accept a jQuery object as an argument, you need the reference to the native element. – Teemu Aug 28 '19 at 10:17
  • 1
    As long as you know the structure of the document you don't need ids. – Salman A Aug 28 '19 at 11:08

0 Answers0