Avatar billede Jesper P Juniormester
18. december 2017 - 12:00 Der er 2 kommentarer og
1 løsning

firstChild

Jeg har dette styk kode som du ser nedenunder,
som sætter baggrundsfarve på alle de classer som er true,
men jeg har nu brug for at den kun sætter baggrundsfarve på første element noget ala firstChild, nogen der har et godt bud :)

document.querySelectorAll("span.TdItemProductTitle").forEach(function(tag) {
  var tableRow = tag;
  if (/xxxxx/i.test(tag.textContent)) {
    tableRow.style.backgroundColor = "rgb(255, 79, 79)";  } else {
  tableRow.style.color = "";
  }
});
Avatar billede Slater Ekspert
18. december 2017 - 12:58 #1
Og du kan ikke bare bruge span.TdItemProductTitle:first-child i din querySelector?

Så skal vi nok vide lidt mere om strukturen.
Avatar billede Jesper P Juniormester
18. december 2017 - 13:05 #2
nej kan ikke bruge :first-child desværre, men er det fordi jeg bruger querySelectorAll ?
html ser således ud:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody><tr>
        <td style="font: normal normal bold 1em/10px Verdana, sans-serif;padding:10px 4px 4px 4px;border-bottom: 1px solid #999" class="table_header_order" width="170px"><span class="TdHeadlineProductTitle">Varer</span></td>
        <td style="font: normal normal bold 1em/10px Verdana, sans-serif;padding:10px 4px 4px 4px;border-bottom: 1px solid #999" class="table_header_order"><span class="TdHeadlineStockStatus">Note</span></td>        <td style="font: normal normal bold 1em/10px Verdana, sans-serif;padding:10px 4px 4px 4px;border-bottom: 1px solid #999" class="table_header_order"><span class="TdHeadlinePrice">Pris</span></td>            <td style="font: normal normal bold 1em/10px Verdana, sans-serif;padding:10px 4px 4px 4px;border-bottom: 1px solid #999" class="table_header_order"><span class="TdHeadlineAmount">Antal</span></td>        <td style="font: normal normal bold 1em/10px Verdana, sans-serif;padding:10px 4px 4px 4px;border-bottom: 1px solid #999" class="table_header_order" align="right"><span class="TdHeadlineTotal">I alt</span></td>        </tr><tr style="background:#eee" class="ItemListBg">
            <td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item">
           
            <div style="float: left;"><span class="TdItemProductTitle">xxxx</span></div></td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item"><table><tbody><tr><td valign="top"><span class="TdItemStockStatus">På lager - Levering 1 dag</span><br></td></tr></tbody></table></td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item"><span style="color: red;text-decoration: line-through;" class="discount">199,00 DKK</span><br><span class="TdItemPrice">179,00 DKK</span>
                </td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item"><span class="TdItemAmount">1 stk.</span></td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item" align="right"><span class="TdItemTotal">179,00 DKK</span></td></tr><tr style="background:#eee" class="ItemListBg">
            <td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item">
           
            <div style="float: left;"><span class="TdItemProductTitle">xxxxx</span></div></td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item"><table><tbody><tr><td valign="top"><span class="TdItemStockStatus">På lager - Levering 1 dag</span><br></td></tr></tbody></table></td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item"><span style="color: red;text-decoration: line-through;" class="discount">199,00 DKK</span><br><span class="TdItemPrice">168,00 DKK</span>
                </td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item"><span class="TdItemAmount">1 stk.</span></td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item" align="right"><span class="TdItemTotal">168,00 DKK</span></td></tr><tr style="background:#eee" class="ItemListBg">
            <td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item">
           
            <div style="float: left;"><span class="TdItemProductTitle">xxxxx</span></div></td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item"><table><tbody><tr><td valign="top"><span class="TdItemStockStatus">På lager - Levering 1 dag</span><br></td></tr></tbody></table></td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item"><span style="color: red;text-decoration: line-through;" class="discount">199,00 DKK</span><br><span class="TdItemPrice">168,00 DKK</span>
                </td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item"><span class="TdItemAmount">1 stk.</span></td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item" align="right"><span class="TdItemTotal">168,00 DKK</span></td></tr><tr style="background:#eee" class="ItemListBg">
            <td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item">
           
            <div style="float: left;"><span class="TdItemProductTitle">xxxx</span></div></td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item"><table><tbody><tr><td valign="top"><span class="TdItemStockStatus">På lager - Levering 1 dag</span><br></td></tr></tbody></table></td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item"><span style="color: red;text-decoration: line-through;" class="discount">199,00 DKK</span><br><span class="TdItemPrice">168,00 DKK</span>
                </td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item"><span class="TdItemAmount" style="font-weight: 900; color: red;">2 stk.</span></td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item" align="right"><span class="TdItemTotal">336,00 DKK</span></td></tr><tr style="background:#eee" class="ItemListBg">
            <td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item">
           
            <div style="float: left;"><span class="TdItemProductTitle" style="color: rgb(96, 167, 60);">product titel text</span></div></td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item"><table><tbody><tr><td valign="top"><span class="TdItemStockStatus">På lager - Levering 1 dag</span><br></td></tr></tbody></table></td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item"><span style="color: red;text-decoration: line-through;" class="discount">29,00 DKK</span><br><span class="TdItemPrice">14,00 DKK</span>
                </td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item"><span class="TdItemAmount" style="font-weight: 900; color: red;">2 stk.</span></td><td valign="top" style="padding:7px 4px 7px 4px;border-bottom:1px solid #ddd" class="order_item" align="right"><span class="TdItemTotal">28,00 DKK</span></td></tr></tbody></table>
Avatar billede Jesper P Juniormester
18. december 2017 - 15:11 #3
Løsning :)
var tag = document.querySelector("div span.TdItemProductTitle")                                 
  var tableRow = tag.parentElement.parentElement.parentElement.parentElement;                                                                               
  if (/xxxx/i.test(tag.textContent)) {
      tableRow.style.backgroundColor = "red";                                         
  }
  else {                                                                                           
    tableRow.style.color = "";                                                                       
  }
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester