Возвращать строки из таблицы в порядке строк - PullRequest
Новая
       2

Возвращать строки из таблицы в порядке строк

0 голосов
/ 31 октября 2019

Допустим, я создаю table в HTML, который содержит цвет фона и текст. По сути, я хочу извлечь этот текст из таблицы, используя JS в мажорном порядке строки, если цвет текста не соответствует цвету фона.

Например, скажем, это моя таблица: 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Build a table</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="test.js"></script>
  <table>
          <tbody>
          <tr>
              <td style="color: #ff00ff; background-color:#FFFFFF">Q</TD>
              <td style="background-color: #442244; color: #442244">Y</td>
              <td style="color: #FFFF00; background-color:#442244">A</td>
          </tr>
          <tr>
              <td style="color: #FFEEFE; background-color:#990000">Q</td>
              <td style="color: #FFFF00; background-color:#FF0">M</td>
              <td style="color: #000000; background-color:#FF7777">O</td>
          </tr>
          </tbody>
      </table>
      <p id="result"></p>
    </body>

Я бы получил таблицу 3х2. Итак, теперь я хочу получить вывод в виде объединенной строки, такой как QAQO, так как Y и M невидимы

Очевидно, мне нужно создать функцию в JS, и я огляделся вокруг, но я не уверенчто именно искать, когда дело доходит до извлечения текста из таблицы и его распечатки при объединении

test.js 

function getText() {

  var arr = $('td').map(function() {
  let $td = $(this);
  return $td.css('background-color') !== $td.css('color') ? $td.text() : null;}).get();

  console.log(arr.join(''));
  $('#result').text(arr.join(''));
}

Ответы [ 2 ]

1 голос
/ 31 октября 2019

Вам нужно пройтись по каждой строке и найти td, где background-color отличается от color.

Самый простой способ сделать это - использовать map() для построениямассив значений, которые вы можете затем выполнить циклически или объединить при необходимости: 

jQuery(function($) {
  var arr = $('td').map(function() {
    let $td = $(this);
    return $td.css('background-color') !== $td.css('color') ? $td.text() : null;
  }).get();

  console.log(arr.join(''));
  $('#result').text(arr.join(''));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td style="color: #ff00ff; background-color: #FFFFFF;">Q</td>
      <td style="color: #442244; background-color: #442244;">Y</td>
      <td style="color: #FFFF00; background-color: #442244;">A</td>
    </tr>
    <tr>
      <td style="color: #FFEEFE; background-color: #990000;">Q</td>
      <td style="color: #FFFF00; background-color: #FF0;">M</td>
      <td style="color: #000000; background-color: #FF7777;">O</td>
    </tr>
  </tbody>
</table>

<p id="result"></p>
0 голосов
/ 31 октября 2019

Использование jQuery: 

let concString = "";
$('table tbody').find('tr').each(function(){
  $(this).find('td').each(function(){
    // condition to get only visible td
    if($(this).css('background-color') !== $(this).css('color')){
      concString += $(this).text();
    }
  });
});

console.log(concString);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...