Question

假设存在具有固定列数的可变行数的表，并且假设每行也有一个按钮，现在我想选择例如列的值（让我们说这个选择了列是textarea，所以当我点击该行的按钮时，我选择了它的内容。

例如，在上面的图片中，我希望如果按下提交的话，那么＆＃39; textarea＆＃39;相应行的对应应存储在变量中。

Answer 1

您可以使用jQuery closest()函数查找单击按钮附近的元素。将单击处理程序添加到按钮，然后遍历以查找textarea。

$('.button').on("click",function(){
    var thisRowsTA = $(this).closest("textarea");
    console.log($(thisRowsTA).val());
});

Answer 2

一个简单的方法是：

将ID模式放入textareas，例如：txt_area_1，txt_area_2，txt_area_3。然后，在按钮的Click事件中，让它们捕获行中相应的textarea。使用ID模式执行此操作。

发布您的代码以获得进一步的帮助。

Answer 3

您需要为每个按钮添加一个事件处理程序。在其中你可以写这样的东西。

function eventHandler(e){
    var row = this; // start at the button

    while(row.nodeName != 'TR' && row.parent){
        // go up till we find the row
        row = row.parent;
    } 


    var textArea = row.querySelector('textarea');
    var value = textArea.value; 
    // do something with supplied feedback.
}

为了附加处理程序，你可以这样做。

function attachTableEvents(){
    var table = document.querySelector('table'); // or more specific selector if needed
    var buttons = table.querySelectorAll('button');
    for (var i = buttons.length; i--;){
        buttons[i].addEventListener(eventHandler);
    }
}

Answer 4

指望DOM结构真的很糟糕。

我会在控件中放置一个包含行号的属性。然后，当单击元素时，您可以通过元素类型和属性值轻松查询DOM，以获取此行中的任何元素。

稍后，如果您更改为DIV或更改结构，您仍然可以正常运行

如何在HTML中获取表中任何行的任何列？

4 个答案: