10

Gostaria de saber como encontrar um determinado elemento <tr> em uma tabela numerada. Por exemplo: Numa tabela em que cada linha <tr> tem suas células <td> numeradas de 1-5, contendo 4 linhas <tr>, se passo o número 15, tenho como resultado a 3ª linha <tr>, se passo o número 17, tenho como resultado a 4ª linha <tr>, e assim por diante.

Com table.match(/<tr>/g), obtenho todos os 4 elementos <tr>, mas o que eu quero é obter apenas um elemento <tr>, como resultado final, de acordo com o critério numérico explicado acima.

O objetivo é aplicar um estilo na tag <tr>, um contorno, outline: solid 1px red;, para dar destaque.

var table = ['<table>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
<tr>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
</tr>
<tr>
<td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
</table>'];

table.match(/<tr>/g); // Me devolve todos os elementos <tr>

A tabela é originalmente a função abaixo que gera um Calendário. Já consegui destacar o dia atual. Agora o desafio é fazer o mesmo com a semana atual:

function Calendar(id, year, month) { 
  var elem = document.getElementById(id)

  var mon = month - 1
  var d = new Date(year, mon)
  var e = new Date();
  var weekDay = ["Sun", "Mon", "Tues", "Wed", "Thu", "Fri", "Sat"];
  var months = ['January', 'Frebruary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  var table = ['<table><tr>']

  table.push('<th colspan = 4>' + months[mon] + '</th>' + '<th colspan = 3>' + year + '</th>' + '</tr><tr>')
  for (var i = 0; i <= 6; i++ ) {
    table.push('<th>' + weekDay[i] + '</th>')
  }
  table.push('</tr><tr>')

  for (var i=0; i<d.getDay(); i++) {
    table.push('<td></td>')
  }

  while(d.getMonth() == mon) {

    if (d.getDate() == e.getDate()) { // Condicional para dar destaque ao dia atual
    table.push('<td class=day>'+d.getDate()+'</td>')
    } else {
    table.push('<td>'+d.getDate()+'</td>')
    }

    if (d.getDay() % 7 == 6) {
      table.push('</tr><tr>')
    }

    d.setDate(d.getDate()+1)  
  }

  for (var i=d.getDay(); i<7; i++) {
    table.push('<td></td>')
  }

  table.push('</tr></table>')

  elem.innerHTML = table.join('\n')
}

new Calendar("cal", 2015, 3);
1
  • 1
    Esse HTML não possui marcas distintas o suficiente para uso de regex, acho que uma solução que faça parse do fragmento vai atender melhor você. Commented 30/03/2015 às 15:19

2 Respostas 2

10

EDIT

Se a estrutura da tabela realmente não mudar:

  • não conteiner tabelas dentro de tabelas
  • o HTML estiver bem formado

então é possível usar regex para achar a tag de abertura do TR que contém a TD com o número desejado, como mostra o snippet abaixo:

var num = 8;

var tabela = getTable();

var tabelaSubst = tabela.replace(RegExp("\\<\\s*tr\\s*\\>(?=((?!\\<\\s*\\/tr\\s*\\>).)*\\D\\s*0*"+num+"\\s*\\D)", 'g'), "<TR class='achou'>");

document.getElementById("content").innerHTML = (tabelaSubst);

function encodeHtml(rawStr) {
    return rawStr && rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
        return '&#' + i.charCodeAt(0) + ';';
    });
}

function getTable() {
    var table = ['<table>' +
        '<tr>' +
        '<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>' +
        '</tr>' +
        '<tr>' +
        '<td>6</td><td>7</td><td> 08</td><td>9</td><td>10</td>' +
        '</tr>' +
        '<tr>' +
        '<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>' +
        '</tr>' +
        '<tr>' +
        '<td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>' +
        '</tr>' +
        '</table>'
    ];
    return table[0];
}
.achou {
     color: red;
}
<div id="content"></div>

    jsfiddle

 

ANTIGO: usando parser de XML

Você pode usar as APIs de parse de XML do broswer, e usar XPath para isso.

Que API's são essas?

  • DOMParser: permite fazer parse de documentos XML (HTML bem formado é XML), e criar uma AST, que contem a estrutura do documento

  • Document.evaluate: permite fazer buscas usando XPath em um documento XML, que tenha sido obtido pelo DOMParser, ou até mesmo o documento carregado, ou seja, a própria DOM da página carregada

Para dar suporta ao IE8

O IE8 não suporta as API's acima diretamente... mas é possível, usar suas próprias:

  • ActiveXObject("Microsoft.XMLDOM") permite fazer parse de XML, além de aplicar XPath, tudo usando um único objeto

XPath

Essa é a linguagem padrão para fazer consultas em documentos XML. Mas não se desanime pela palavra Path pois XPath está longe de ser um simples seletor de caminhos.

Exemplo

function getTrsModernBrowser() {
    var parser = new DOMParser();
    var frag = parser.parseFromString(getTable()[0], "text/xml");
    var xpathResult = frag.evaluate("//tr[td[text()=17]]", frag, null, XPathResult.ANY_TYPE, null);

    var trs = [];
    var result = xpathResult.iterateNext();
    while (result) {
        trs.push(result);
        result = xpathResult.iterateNext();
    }
    return trs;
}

function getTrsIE8() {
    var frag = new window.ActiveXObject("Microsoft.XMLDOM");
    frag.async = "false";
    frag.loadXML(getTable()[0]);
    frag.setProperty("SelectionLanguage", "XPath");
    var results = frag.selectNodes("//tr[td[text()=17]]");
    var trs = [];
    for (it = 0; it < results.length; it++)
        trs.push(results[it]);
    debugger;
    return trs;
}

function getTrs() {
    return window.ActiveXObject ? getTrsIE8() : getTrsModernBrowser();
}

var trs = getTrs();
for (var itTr = 0; itTr < trs.length; itTr++) {
    document.getElementById("content").innerHTML = encodeHtml(
        trs[itTr].outerHTML // browsers que suportam a API DOMParser
        || trs[itTr].xml // IE8
    );
}

function encodeHtml(rawStr) {
    return rawStr && rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
        return '&#' + i.charCodeAt(0) + ';';
    });
}

function getTable() {
    var table = ['<table>' +
        '<tr>' +
        '<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>' +
        '</tr>' +
        '<tr>' +
        '<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>' +
        '</tr>' +
        '<tr>' +
        '<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>' +
        '</tr>' +
        '<tr>' +
        '<td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>' +
        '</tr>' +
        '</table>'
    ];
    return table;
}
<div id="content"></div>

    jsfiddle, pra que gosta de brincar lá, ao invés do snippet do SOPT

Dissecando a XPath acima do exemplo

  • //tr[td[text()=17]]

    1. // ao início instrui o mecanismo a buscar nós em todos os níveis, e não somente na raiz
    2. tr é o elemento a ser encontrado, e poderia ser o nome de qualquer elemento
    3. [ condição ] esse operador se trata de uma assertiva sobre o elemento anterior, somente serão selecionados trs com as características definidas dentro do operador []
    4. text()=17 indica que o texto do elemento sendo analisado deve ser o número 17. Atenção para o que eu disse: "O NÚMERO 17"... será usado comparador numérico. Portanto o texto do elemento poderá ser "017", " 00017 ", "17", etc.
12
  • 1
    Fiddle! Fiddle! Fiddle! :) Tou curioso, as aplicações são mais que muitas!
    – Zuul
    Commented 30/03/2015 às 15:53
  • Calma! Eu vou adicionar informações... estou em processo de descoberta ainda. =) Commented 30/03/2015 às 15:55
  • @Zuul Agora a resposta já está mais consistente. Me diz o que achou... se tá boa, se falta eu explorar mais algum ponto... etc. Commented 30/03/2015 às 18:03
  • 1
    @Zuul Corrigido! Ao invés de document.evaluate devia ter usado frag.evaluate. Commented 30/03/2015 às 19:03
  • @MiguelAngelo - Achou que eu não fui muito claro na minha pergunta. O seu código devolve todas as células pertencentes a tag <tr>. O que eu preciso é mais ou menos ao contrário. Quero a tag <tr> que contém o número passado, não a série de células dentro dela. Se houver um modo mais simples de realizar isso, com regex, melhor.
    – eden
    Commented 30/03/2015 às 22:16
8

Sugiro fazer isso via HTML no Browser que é bem melhor que RegEx para ler HTML.
Não precisas de juntar ao DOM mas usando o Browser é mais seguro.

Sugestão:

Junta esse HTML a uma DIV:

var div = document.createElement('div');
div.innerHTML = table;

Junta o método de arrays aos métodos dos nodeLists para poderes usar querySelectorAll:

NodeList.prototype.filter = Array.prototype.filter;

Usa os métodos que usas no DOM nessa div:

var value = input.value || 0;
var tds = div.querySelectorAll('td');
var match = tds.filter(function (td) {
    return td.innerHTML == value;
});
var resultado = match && match[0].parentNode;
alert(resultado.innerHTML); // vai mostrar só a linha que queres

exemplo: http://jsfiddle.net/zgbctL0o/

EDIT:

Na sequência das clarificações adicionadas à pergunta o resultado final com o meu código foi adicionar no final dessa função estas linhas:

// mark this week
var today = (new Date()).getDate();
var tds = elem.querySelectorAll('td');
NodeList.prototype.filter = Array.prototype.filter;
var match = tds.filter(function (td) {
    return td.innerHTML == today;
});
if (match) match[0].parentNode.style.outline = 'solid 1px red';

jsFiddle: http://jsfiddle.net/efuu16b8/

6
  • Achou que eu não fui muito claro na minha pergunta. O seu código devolve todas as células pertencentes a tag <tr>, igual ao do Miguel Angelo. O que eu preciso é mais ou menos ao contrário. Quero a tag <tr> que contém o número passado, não a série de células dentro dela. Se houver um modo mais simples de realizar isso, com regex, melhor.
    – eden
    Commented 30/03/2015 às 22:18
  • @eden o meu código dá-te o tr. Só no alert juntei o conteudo para mostrar que era a tr certa. A variável resultado é o elemento tr. RegEx não é mais seguro que esta maneira que coloquei na resposta.
    – Sergio
    Commented 31/03/2015 às 5:04
  • Com RegExp eu seria capaz de fazer um replace mais ou menos assim: replace([<tr> desejada], '<tr style=outline=solid 1px red'), aplicando um contorno na tag desejada. Como realizar isso com a sua solução?
    – eden
    Commented 31/03/2015 às 13:38
  • @eden então podes usar resultado.style.outline = 'solid 1px red'; Como vais usar essa tabela? já está no DOM? se sim ainda é mais fácil... ou tens em string e queres manter em string? explica melhor que junto exemplo também.
    – Sergio
    Commented 31/03/2015 às 14:10
  • 1
    @eden se tivesses colocado essa informação desde o inicio tinhas tido resposta com exemplo direto :) Aqui vai exemplo usando a minha solução: jsfiddle.net/qmLjmqsL
    – Sergio
    Commented 31/03/2015 às 14:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .