Każdy wiersz tabeli ma przycisk "Show" znajdujący się w komórce. Na kliknięciu tego przycisku muszę wyodrębnić tekst, zawarty w innych komórkach tego dokładnego wiersza.

Przykładowy kod HTML:

<tr>
    <td>1</td>
    <td>Info1</td>
    <td><input class="btn" value="Show" onclick="showRowInfo();" type="button"></td>
</tr>
<tr>
    <td>2</td>
    <td>Info2</td>
    <td><input class="btn" value="Show" onclick="showRowInfo();" type="button"></td>
</tr>
<tr>
    <td>3</td>
    <td>Info3</td>
    <td><input class="btn" value="Show" onclick="showRowInfo();" type="button"></td>
</tr>

Chcę, gdy naciskam (na przykład) przycisk w trzecim rzędzie, aby wyodrębnić tekst w pozostałych 2 komórkach ("3" i "info3"). Szukam implementacji showrowinfo () w JavaScript lub przynajmniej sposobie uzyskania komórek z wybranego wiersza.

-3
DanielLazarov 14 sierpień 2014, 12:33

2 odpowiedzi

Najlepsza odpowiedź

Zamiast ustawić atrybut onclick na każdym z tych przycisków, użyłbym jednego słuchacza zdarzeń. Widząc, jak dodałeś znacznik jQuery, ten kod powinien wykonać sztuczkę:

$('table').on('click', '.btn', function()
{//replace table selector with an id selector, if you are targetting a specific table
    var row = $(this).closest('tr'),
        cells = row.find('td'),
        btnCell = $(this).parent();
    //set to work, you have the cells, the entire row, and the cell containing the button.
});

skrzypce

Jeśli chcesz zrobić to samo w Vanillajs:

document.querySelector('table').addEventListener('click', function(e)
{//same applies here: querySelector('#tableID') would be preferable
    var target = (e = e || window.event).target || e.srcElement;
    if (target.tagName.toLowerCase() === 'input' && target.className.match(/\bbtn\b/))
    {
        var btnCell = target.parentNode,
            row = (function(node)
            {
                while (node.tagName.toLowerCase() !== 'tr')
                    node = node.parentNode;
                return node
            }(btnCell)),
            cells = row.cells;
        //set to work, you have the button-containing cell, the row and all of the cells
    }
}, false);

Ta technika nazywa się delegacją zdarzeń, google w przypadku, gdy nie jesteś zaznajomiony z pomysłem.

1
Elias Van Ootegem 14 sierpień 2014, 08:48

Musisz przejść this w showrowinfo (to),

 onclick="showRowInfo(this);"

    function showRowInfo(elm) {
       alert($(elm).closest("tr").find("td:lt(2)").text());
  }

PRÓBNY

1
Balachandran 14 sierpień 2014, 08:42