Tag: table

23 sty 2015

Tabele w RWD

Powiedzmy że posiadamy tabelę z rezerwacjami hotelowymi.
Jeżeli zmniejszymy rozdzielczość na wielkość znaczka pocztowego - powiedzmy 320px to nic nie będzie widać i tutaj z pomocą przychodzi CSS.
Poniższe rozwiązanie działa od IE8 no i oczywiście w nowych przeglądarkach 😉

Przykładowa a tak wygląda tabela.

<section class="reservation-box">
    <table class="table-reservation">
        <thead>
        <tr>
            <th>Nazwisko i imię</th>
            <th>Telefon</th>
            <th>Adres e-mail</th>
            <th>Liczba wizyt</th>
            <th>Data ostatniej rezerwacji</th>
        </tr>
        </thead>
        <tbody>
        <tr class="reservation-row-item">
            <td data-title="Nazwisko i imię">Pałczyński stefan</td>
            <td data-title="Telefon">14725836</td>
            <td data-title="Adres e-mail">palczynski.stefan@gmail.com</td>
            <td data-title="Liczba wizyt">0</td>
            <td data-title="Data ostatniej rezerwacji">nie odbyła się</td>
        </tr>
        <tr class="reservation-row-item">
            <td data-title="Nazwisko i imię">Miałczyński Cezary</td>
            <td data-title="Telefon">69522999</td>
            <td data-title="Adres e-mail">mcezik@tet.pl</td>
            <td data-title="Liczba wizyt">1</td>
            <td data-title="Data ostatniej rezerwacji">28 stycznia 2014</td>
        </tr>
        <tr class="reservation-row-item">
            <td data-title="Nazwisko i imię">Tomaczek Andrzej</td>
            <td data-title="Telefon">32999222</td>
            <td data-title="Adres e-mail">tomaczekandrzej@jawa.pl</td>
            <td data-title="Liczba wizyt">1</td>
            <td data-title="Data ostatniej rezerwacji">20 stycznia 2015</td>
        </tr>
        </tbody>
    </table>
</section>

Jak widać tabela jak tabela, wygląda normalnie ale pojawiło się coś w komórkach "data-title" - atrybuty, te same nazwy co w sekcji thead > th.

<tr class="reservation-row-item">
    <td data-title="Nazwisko i imię">Pałczyński stefan</td>
    <td data-title="Telefon">14725836</td>
    <td data-title="Adres e-mail">palczynski.stefan@gmail.com</td>
    <td data-title="Liczba wizyt">0</td>
    <td data-title="Data ostatniej rezerwacji">nie odbyła się</td>
</tr>
Czytaj dalej
5 wrz 2008

Sposób na przekazanie wartości z ajaxa

function dodajdoBazyWynik(nr) {
    var el2  = document.getElementById("zwyciezcatmp_"+nr);
    var wart = el2.value;

    if(wart!="") {
        var tab = wart.split("|");
        var el3  = document.getElementById("zwyciezcaid_"+nr);
        var el4  = document.getElementById("zwyciezca_"+nr);
        el3.value = tab[0];
        el4.value = tab[1];
    }
}
26 lip 2008

Dodawanie dynamiczne tabeli do komórki innej tabeli

<HTML>

  <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Author" CONTENT="">
    <SCRIPT LANGUAGE="JavaScript">
      function ukryjtab(id) {

        var element = document.getElementById(id);
        while (element.firstChild) {
          element.removeChild(element.firstChild);
        }
      }
      function dodajtab(id) {

        var element = document.getElementById(id);
        var tbl = document.createElement("table");
        var tblBody = document.createElement("tbody");

        for (var j = 0; j < 2; j++) {
          var row = document.createElement("tr");
          for (var i = 0; i < 2; i++) {

            var cell = document.createElement("td");
            var cellText = document.createTextNode("komórka nr: " + j + ", kolumna nr: " + i);
            cell.appendChild(cellText);
            row.appendChild(cell);
          }
          tblBody.appendChild(row);
        }

        tbl.appendChild(tblBody);
        element.appendChild(tbl);
        tbl.setAttribute("border", "1");
      }
    </SCRIPT>
  </HEAD>

  <BODY>
    <TABLE border="1">
      <TR>
         <TD>fiat stilo</TD>
         <TD>1,6</TD>
         <TD><input type="button" name="wybor" value="pokaz" onClick="dodajtab(2)"><input type="button" name="wybor"
            value="ukryj" onClick="ukryjtab(2)"></TD>
      </TR>
      <TR>
         <TD colspan="3" id="2"></TD>
      </TR>
      <TR>
         <TD>fiat panda</TD>
         <TD>1,1</TD>
         <TD>&amp;nbsp;</TD>
      </TR>
    </TABLE>
  </BODY>

</HTML>
Copyright © | kodyWiG Theme