fiddle

Question

每个表格行都有一个位于单元格中的“显示”按钮。单击该按钮，我需要提取包含在该确切行的其他单元格中的文本。

示例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>

我想要的是：当我按下（例如）第3行的按钮时，提取其他2个单元格中的文本（“3”和“Info3”）。我正在寻找JavaScript中showRowInfo（）的实现，或者至少是从所选行获取单元格的方法。

Answer 1

你必须在showRowInfo（this）中传递this，

 onclick="showRowInfo(this);"

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

DEMO

Answer 2

我没有在每个按钮上设置onclick属性，而是使用单个事件监听器。看到你添加了一个jQuery标签，这段代码应该可以解决问题：

$('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.
});

fiddle

如果你想在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);

这项技术称为事件委托，如果您不熟悉其背后的想法，请使用谷歌。

JavaScript在按钮点击时从表格单元格获取信息

2 个答案:

fiddle