Jquery read letters in row major order concentrate them into a single string and return it

Viewed 674

During my job interview i had task to create a function using jquery which read letters from a table in row major order concentrate them into a single string and return it. but it must skip letters that have the same color and background color. I failed it but I want to fix the problem anyway . Can You help me with this? i used function:

$(document).ready(function () {
  let para = $('th').toArray();
 
  $.map(para, function (i) {
    if ($(i).css('color') !== $(i).css('background-color')) {
      newStr = '';
      newStr = $(i).text();

    
      return newStr;
    }
  });

here is html code:

<body>
    <table>
      <tbody>
        <tr>
          <th style="background-color: blue; color: yellow">Q</th>
          <th style="background-color: magenta; color: yellow">A</th>
          <th style="background-color: green; color: green">M</th>
        </tr>
        <tr>
          <th style="background-color: green; color: magenta">P</th>
          <th style="background-color: red; color: red">A</th>
          <th style="background-color: yellow; color: green">Q</th>
        </tr>
      </tbody>
    </table>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="app.js"></script>
</body>
1 Answers

Here you go :

var str = "";

$('th').each(function() {
  if ($(this).css("color") != $(this).css("background-color")) {
    str += $(this).text();
  }
});

console.log(str);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th style="background-color: blue; color: yellow">Q</th>
      <th style="background-color: magenta; color: yellow">A</th>
      <th style="background-color: green; color: green">M</th>
    </tr>
    <tr>
      <th style="background-color: green; color: magenta">P</th>
      <th style="background-color: red; color: red">A</th>
      <th style="background-color: yellow; color: green">Q</th>
    </tr>
  </tbody>
</table>

Related