Получить данные определенного <td> в таблице

Мне нужно получить данные определенного <td>, но у меня нет id или name для этого конкретного <td>. Как получить содержимое этого <td>?

Например:

<table>
  <tr><td>name</td><td>praveen</td></tr>
  <tr><td>designation</td><td>software engineer</td></tr>
</table>

Можно ли получить значение "обозначение" из этой таблицы .. Мне нужно извлечь слово "инженер-программист" с помощью javascript.

Какие-либо причины отсутствия идентификаторов?

Vijay Dev 03.11.2008 10:47

Хороший вопрос. Раньше я сталкивался с подобной ситуацией, когда у меня был какой-то неприятный сторонний элемент управления, выплевывающий html без каких-либо обозначений.

Jeff Schumacher 03.11.2008 11:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
2 020
5

Ответы 5

Что-то вроде:
(не тестировалось, просто быстрый код, чтобы дать представление)

var tables = document.getElementById('TABLE'); // instead of document.all.tag
var rows;
var cells;
var maxCells = 1;
var designation;
if (tables) {
    for (var t=0; t<tables.length; t++) {
        rows = tables[t].all.tags('TR');
        if (tables[t].all.tags('TABLE').length == 0) {
            for (var r=0; r<rows.length; r++) {
                if (rows[r].innerText != '') {
                    cells = rows[r].all.tags('TD');
                    for (var c=0; c<cells.length; c++) {
                        if (cells[c].innerText == 'designation' && c<(cells.length-1)) {
                            designation = cells[c+1].innerText;
                        }
                    }
                }
            }
        }
    }
}

Поскольку document.all специфичен для IE, вам лучше использовать getElementById со следующим переопределить эту функцию для IE:

if (/msie/i.test (navigator.userAgent)) //only override IE
{
    document.nativeGetElementById = document.getElementById;
    document.getElementById = function(id)
    {
        var elem = document.nativeGetElementById(id);
        if (elem)
        {
            //make sure that it is a valid match on id
            if (elem.attributes['id'].value == id)
            {
                return elem;
            }
            else
            {
                //otherwise find the correct element
                for(var i=1;i<document.all[id].length;i++)
                {
                    if (document.all[id][i].attributes['id'].value == id)
                    {
                        return document.all[id][i];
                    }
                }
            }
        }
        return null;
    };
}

это хорошо, но вы используете код, специфичный для IE (document.all не существует в Firefox).

nickf 03.11.2008 10:35

Исправлено частично (добавлена ​​правильная перезапись getElementById)

VonC 03.11.2008 10:48

Быстрое решение:

function GetTdContent(label)
{
  var TDs = document.getElementsByTagName("TD");
  var foundFlag = false;

  for (i = 0; i < TDs.length; i++)
  {
    if (foundFlag) return TDs[i].innerHTML;
    foundFlag = TDs[i].innerHTML.toLower() == label.toLower(); 
  }
}

в другом месте звоните:

var value = GetTdContent("designation");

Объяснение:

Функция выполняет итерацию всех TD в документе. Если он находит один с заданной меткой, скажем «обозначение», он повторяет цикл еще раз и возвращает следующее содержимое TD.

Это делает несколько предположений об исходном HTML. Но если вы знаете свои данные, этого может быть достаточно.

Используйте XPath (руководство здесь, включая инструкции для IE и других браузеров: http://www.w3schools.com/XPath/xpath_examples.asp)

Xpath для вашего примера

// таблица / tr / td [text () = "обозначение"] / follow :: td

(«td, следующий за td с текстом« обозначение », который находится в tr, который находится в таблице где-то в документе»)

Возможны более простые Xpath - если это единственная ячейка таблицы, которая может содержать 'обозначение', вы можете использовать

// td [text () = "обозначение"] / follow :: td

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

В руководстве, на которое вы ссылаетесь, показано, как загрузить внешний XML-файл, а не как использовать XPath в IE в текущем документе ...

PhiLho 03.11.2008 14:40

Я предпочитаю использовать jQuery для выполнения всей тяжелой работы для такого рода задач.

Например, следующая функция вернет текст следующего элемента того же типа, который вы ищете:

function GetNextChildText(tagToFind, valueToFind) {
    var nextText = "";
    $(tagToFind).each(function(i) {
        if ($(this).text() == valueToFind) {
            if ($(this).next() != null && $(this).next() != undefined) {
                nextText = $(this).next().text();
            }
        }
    });
    return (nextText);
}

Итак, для вашего примера таблицы ваш вызов для возврата обозначения может быть:

var designationText = GetNextChildText('td', 'designation');

В результате переменная designationText будет содержать значение «инженер-программист».

Томалак чуть шустрее:

<script type = "text/javascript">
function getText(tText){
  var tds = document.getElementsByTagName("td");
  for(var i=0, im=tds.length; im>i; i++){
    if (tds[i].firstChild.nodeValue == tText)
      return tds[i].nextSibling.firstChild.nodeValue;
  }
}
</script>

Другие вопросы по теме