Question

我的这个表有多行。每行包含2个文本输入类型字段和一个在单击时运行功能的按钮。

基本上所有输入字段和按钮都具有与jQuery相同的id。现在我只想传递与按钮位于同一行的文本字段的值。现在有人如何做到这一点？

 $("#teams").find('tbody')
        .append($('<tr>')

            .append($('<td>')
                .text(thisarray.matchId)
                .prop('id','matchId')
            )

            .append($('<td>')
                .text(thisarray.homeTeam)
            )
            .append($('<td>')
                .text(thisarray.awayTeam)
            )
            .append($('<td>')
                .append($('<input>')
                    .prop('type', 'text')
                    .prop('id', 'scoreHome')
                )
            )
            .append($('<td>')
                .append($('<input>')
                    .prop('type', 'text')
                    .prop('id', 'scoreAway')
                )
            )
            .append($('<td>')
                .append($('<input type="button" value="Ok" id="sendGoals"/>')
                )
            )
        );

这是一个文件中的JS。

function sendAllScores(){
//get scores
var scoreHomeTeam = $('#scoreHome').closest('tr').val();
var scoreAwayTeam = $('#scoreAway').closest('tr').val();
var matchId = $('#matchId').closest('tr').val();

这是来自其他文件

Answer 1

如果他们在同一排。然后他们必须在DOM内部，如

<tr>
  <td><input type="text" /></td>
  <td><input type="button" /></td>
</tr>

如果是这样，那么jQuery就是去父行，并从中获取输入值

$('input[type=button]').click(function () {
  var val = $(this).parent().parent().find('input[type=text]').val();
  alert(val);
});

请注意，会有2位父母，

td元素
tr元素。

然后转到输入类型的子元素并获取其值。

Answer 2

下面是一个小例子：Fiddle

填充这个：

<table id="theTable"></table>

使用：

$(function(){
    var _rows=10;
    var _body="";
    for(i =0;i<_rows;i++){
        _body+="<tr>"+
            "<td><input type='text' class='text1'></input></td>"+
            "<td><input type='text' class='text2'></input></td>"+
            "<td><input type='button' class='theButton' value='Click Here'></input></td>"+
            "</tr>";
    }
    $("#theTable").html(_body);
    $(".theButton").on("click",function(){
        alert("Text1: "+$(".text1",$(this).parent().parent()).val()+", Text2: "+$(".text2",$(this).parent().parent()).val());
    });
 })

Answer 3

不需要id或其他东西。您可以使用索引获取em

$("table tr td input[type=button]").on("click", function(){
  var value1 = $(this).parent().parent().find("input:eq(0)").val();
  var value2 = $(this).parent().parent().find("input:eq(1)").val();
  // do your job with value1 and value2
});

FIDDLE

从表中同一行的输入文本中获取值

3 个答案: