jQuery – vložení obsahu buňky do inputu

Občas je výhodné umožnit uživateli přenos textu, např. z tabulky, do vyhledávacího pole. Pomocí knihovny jQuery se to dá udělat velmi snadno.

Mějme jednoduchou, statickou HTML stránku, např.:

<p>Text: <input name="text" size="30" id="inputText"></p>

<table border="1">
<tr><th>#</th><th>Položka</th></tr>
<tr><td>#1</td><td class="item">Položka 1</td></tr>
<tr><td>#2</td><td class="item">Položka 2</td></tr>
<tr><td>#3</td><td class="item">Položka 3</td></tr>
<tr><td>#4</td><td class="item">Položka 4</td></tr>
<tr><td>#5</td><td class="item">Položka 5</td></tr>
</table>

Našim cílem je, aby se po dvojkliku na buňku tabulky objevil text z buňky ve vyhledávacím poli. Pomocí jQuery se to dá udělat velmi jednoduše:

  $(document).ready(function() {
    $("td.item").dblclick(function() {
        $("#inputText").val($(this).text());
    });
  });

První řádek zaručí, že se bude skript vykonávat, až po načtení celého dokumentu. Druhý řádek přiřadí událost dblclick, tzn. dvojklik, každé buňce tabulky, která má nastavenou třídu (atribut class) item.

Třetí řádek už řeší samotnou akci, tzn. po dvojkliku na buňku tabulky se obsah buňky ($(this).text()) zkopíruje do inputu, který má id inputText.

Tato funkce je užitečná, např. pro rozsáhlé tabulky, u kterých funguje filtrování údajů. Návštěvník nemusí přepisovat text, stačí dvakrát kliknout.

Ukázka celého skriptu je zde.