从现有的html获取表数据

时间:2013-04-04 15:22:02

标签: html html-table

我有一个页面,其中包含一个包含5列和多行的基本表。每列代表一个工作日,每一行代表菜单上的不同菜肴。我想创建一个只显示今天菜单的页面。

我对此表没有写访问权限。 (如果必要的话我可以要求网站管理员做一些修改)

对我来说,显示具有ID =“星期一”的所有东西似乎是合乎逻辑的,但我无法从中获得任何东西。

这是现有的表格:

<table cellpadding="4" class="weeklymenu" width="100%">
  <tbody>
    <tr ID="day">
      <th ID="monday" scope="col" width="20%">Monday</th>
      <th ID="tuesday" scope="col" width="20%">Tuesday</th>
      <th ID="wednesday" scope="col" width="20%">Wednesday</th>
      <th ID="thursday" scope="col" width="20%">Thursday</th>
      <th ID="friday" scope="col" width="20%">Friday</th>
    </tr>
    <tr ID="date">
        <td ID="monday" class="date" width="151">08/04/2013</td>
        <td ID="tuesday" class="date" width="179">09/04/2013</td>
        <td ID="wednesday" class="date" width="144">10/04/2013</td>
        <td ID="thursday" class="date" width="141">11/04/2013</td>
        <td ID="friday" class="date" width="152">12/04/2013</td>
    </tr>
      <tr ID="first">
          <td class="piatti" colspan="5" width="779">
              <strong>First dish / Primi</strong>
          </td>
      </tr>
      <tr ID="first">
          <td ID="monday" height="27" width="151">Riso in bianco</td>
          <td ID="tuesday" height="27" width="179">Pancetta piacentina</td>
          <td ID="wednesday" height="27" width="144">Riso in bianco</td>
          <td ID="thursday" height="27" width="141">Insalata russa</td>
          <td ID="friday" height="27" width="152">Riso in bianco</td>
      </tr>
      <tr ID="first">
          <td ID="monday" height="29" width="151">Zuppa d'orzo</td>
          <td ID="tuesday" height="29" width="179">Minestra di cicerchie</td>
          <td ID="wednesday" height="29" width="144">Minestra di fagioli adzuki</td>
          <td ID="thursday" height="29" width="141">Crema di sedano</td>
          <td ID="friday" height="29" width="148">Passato di legumi cpon crostini</td>
      </tr>
      <tr ID="first">
          <td ID="monday" height="48" width="151">Gnocchetti sardi broccoli e salsiccia</td>
          <td ID="tuesday" height="48" width="179">Risotto alla milanese</td>
          <td ID="wednesday" height="48" width="144">Pennette alla puttanesca</td>
          <td ID="thursday" height="48" width="141">Conchiglie tonno e capperi</td>
          <td ID="friday" height="48" width="148">Caserecce zafferano panna e speck</td>
      </tr>
      <tr ID="second">
        <td class="piatti" colspan="5" height="30" width="779">
            <strong>Second dish / Secondi</strong>
        </td>
    </tr>
    <tr ID="second">
        <td ID="monday" width="151">Controfiletto di puledro</td>
        <td ID="tuesday" width="179">Fesa di tacchino ai ferri</td>
        <td ID="wednesday" width="144">Spezzatino alla goriziana</td>
        <td ID="thursday" width="141">Verzini in umido</td>
        <td ID="friday" width="148">Vitello tonnato</td>
      </tr>
      <tr ID="second">
          <td ID="monday" height="43" width="151">Cotoletta di tofu con verdure</td>
          <td ID="tuesday" height="43" width="179">Tortino crecy</td>
          <td ID="wednesday" height="43" width="144">Mozzarella di bufala</td>
          <td ID="thursday" height="43" width="141">Ebly primaverile</td>
          <td ID="friday" height="43" width="148">Falafel con salsa tzatziki</td>
      </tr>
      <tr ID="second">
          <td ID="monday" height="52" width="151">Prosciutto crudo con melone</td>
          <td ID="tuesday" height="52" width="179">Persico del Nilo agli asparagi</td>
          <td ID="wednesday" height="52" width="144">Arrosticini di suino al forno</td>
          <td ID="thursday" height="52" width="141">Paillard di vitello alla piastra</td>
          <td ID="friday" height="52" width="148">Trancio di salmone al forno</td>
      </tr>
      <tr ID="side">
          <td class="piatti" colspan="5" height="28" width="779">
              <strong>Side dishes / Contorni</strong>
          </td>
      </tr>
      <tr ID="side">
          <td ID="monday" height="28" width="151">Patatine fritte</td>
          <td ID="tuesday" height="28" width="179">Patate prezzemolate</td>
          <td ID="wednesday" height="28" width="144">Purè di patate</td>
          <td ID="thursday" height="28" width="141">Patate al rosmarino</td>
          <td ID="friday" height="28" width="148">Patate al naturale</td>
      </tr>
      <tr ID="side">
          <td ID="monday" height="28" width="151">Cavolfiori alla parmigiana</td>
          <td ID="tuesday" height="28" width="179">Pomodori alla provenzale</td>
          <td ID="wednesday" height="28" width="144">Piselli alla francese</td>
          <td ID="thursday" height="28" width="141">Melanzane alla positana</td>
          <td ID="friday" height="28" width="148">Fagiolini all'olio</td>
      </tr>
      <tr ID="desert">
          <td class="piatti" colspan="5" height="28" width="779">
              <strong>Dessert / Dolci</strong>
          </td>
      </tr>
      <tr ID="desert">
          <td ID="monday" height="31" width="151">Crostatine al limone</td>
          <td ID="tuesday" height="31" width="179"> Budino</td>
          <td ID="wednesday" height="31" width="144">Macedonia</td>
          <td ID="thursday" height="31" width="141">Profitterol al cioccolato</td>
          <td ID="friday" height="31" width="148">Fragole</td>
      </tr>
      <tr ID="desert">
          <td ID="monday" width="151"/>
          <td ID="tuesday" width="179"> </td>
          <td ID="wednesday" width="144"> </td>
          <td ID="thursday" width="141"> </td>
          <td ID="friday" width="152"> </td>
      </tr>
      <tr ID="ingredients">
          <td ID="monday" class="date" width="151">Ingredients</td>
          <td ID="tuesday" class="date" width="179">Ingredients</td>
          <td ID="wednesday" class="date" width="144">Ingredients</td>
          <td ID="thursday" class="date" width="141">Ingredients</td>
          <td ID="friday" class="date" width="152">Ingredients</td>
    </tr>
  </tbody>
</table>

1 个答案:

答案 0 :(得分:0)

我修改了你的表以获得类并将表修剪为只有两行并使用jquery进行操作。

这是html

 <table> 
  <tbody>
    <tr ID="day">
      <th class="monday" scope="col" width="20%">Monday</th>
      <th class="tuesday" scope="col" width="20%">Tuesday</th>
      <th class="wednesday" scope="col" width="20%">Wednesday</th>
      <th class="thursday" scope="col" width="20%">Thursday</th>
      <th class="friday" scope="col" width="20%">Friday</th>
    </tr>
    <tr ID="date">
        <td class="monday" class="date" width="151">08/04/2013</td>
        <td class="tuesday" class="date" width="179">09/04/2013</td>
        <td class="wednesday" class="date" width="144">10/04/2013</td>
        <td class="thursday" class="date" width="141">11/04/2013</td>
        <td class="friday" class="date" width="152">12/04/2013</td>
    </tr>
  </tbody>
</table>

这是我用来获取数据的JavaScript。你可以使用多种条件随心所欲地做任何事情

var data = '';
$('.monday').each( function() {
    data += $(this).html();
});
alert(data);

与小提琴的链接是 http://jsfiddle.net/f2sTT/1/