jQuery проблема с выделением текста только из ячейки таблицы, когда есть изображение - PullRequest
Новая
       122

jQuery проблема с выделением текста только из ячейки таблицы, когда есть изображение

1 голос
/ 30 мая 2020

Я использую jQuery (ну, привет), чтобы очистить данные из таблицы html. Я пытаюсь отобразить данные из одного столбца, в котором есть текст и изображение в ячейке, но я хочу, чтобы он отображал только текст.

, например, таблица выглядит так: 

col 1          | col 2     | col 3
---------------------------------------
data 1-1 [img] | data 1-2  | data 1-3 
data 2-1 [img] | data 2-2  | data 2-3 
data 3-1 [img] | data 3-2  | data 3-3 
data 4-1 [img] | data 4-2  | data 4-3

Когда я выбираю вот так: $(this).children().next().text(), он выводит все в этой строке, например: data 1-1 data 1-2 data 1-3

Он работает, когда я делаю $(this).children().next().html(), но тогда вывод следующий: data 1-1 <img src="blah.jpg"> , очевидно, потому что он включает html изображения в этом столбце.

Как мне заставить его выбрать только data 1-1 без включения img или остальной части этой строки?

Я очень новичок в jQuery, поэтому мне было трудно с этим. Приносим извинения, если этот вопрос уже был задан, я ничего не нашел об этом ... Я оставил код для простоты, но дайте мне знать, если вы хотите увидеть всю функцию

ОБНОВЛЕНИЕ: ОТВЕТ

Спасибо Роко за помощь, вот решение, реализованное с моим полным кодом (я использовал .eq(0) вместо tr:eq(0), потому что я использую cheerio ) 

router.get("/scrape", function(req, res){
    request("http://link-goes-here", function(error, response, html){
        var $ = cheerio.load(html);
        var storeInfo = [];
        $("body > table > tbody > tr > td:nth-child(1) > table").addClass("row");
        //loop through selected table only where tr = "QA1"
        $('.row > tbody > tr:contains("QA1")').each(function(i, element){
            var result = {
                "environment" : $(this).children().next().eq(0).text(),
                "store" : $(this).children().next().next().html(),
                "version" : $(this).children().next().next().next().html()
            };
            storeInfo.push(result);
        });
    });
    res.redirect("/stores");
});

1 Ответ

1 голос
/ 30 мая 2020

Вы можете использовать :eq() селектор или .eq() метод , чтобы получить определенный c индекс строки, а затем c индекс ячейки.

Пример получение .text() первого TR :eq(0) и первого TD TBODY :eq(0) 

const val = $("#someTable").find("tbody tr:eq(0) td:eq(0)").text();
console.log(val);   // "data 1-1" 
<table id="someTable">
<thead>
  <tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr>
</thead>
<tbody>
  <tr><td>data 1-1 <img src="//placehold.it/50x50"></td><td>data 1-2</td><td>data 1-3</td></tr>
  <tr><td>data 2-1 <img src="//placehold.it/50x50"></td><td>data 2-2</td><td>data 2-3</td></tr>
  <tr><td>data 3-1 <img src="//placehold.it/50x50"></td><td>data 3-2</td><td>data 3-3</td></tr>
  <tr><td>data 4-1 <img src="//placehold.it/50x50"></td><td>data 4-2</td><td>data 4-3</td></tr>
</tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Чтобы получить первую ячейку второй строки, просто используйте tr:eq(1) и td:eq(0). И так далее

...