Question

我试图将动态生成的tr中的输入值输入到数组中。如何在数组中获取组合的td值？

<input type="button" id="button" value="Click Me" />

<table style="width:100%" id="sub1">
    <tr>
        <td>
            <input class="myInpCls" type="text" />
        </td>
        <td>
            <select class="mySelCls">
                <option value="1">value 1</option>
                <option value="2">value 2</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <input class="myInpCls" type="text" />
        </td>
        <td>
            <select class="mySelCls">
                <option value="3">value 3</option>
                <option value="4">value 4</option>
            </select>
        </td>
    </tr>
</table>

var onClick = function() {
    var inputs = $("#sub1").find('.myInpCls');
    for (var i = 0; i < inputs.length; i++) {
        var el = inputs[i];
        alert($(el).val());
    }   
};

$('#button').click(onClick);

我可以使用.find('.myInpCls')来提取输入值。如何在此处获取组合值？类似input1##value 1，input2##value 2等数组

更新我在下一个td中有一个选择框。我必须结合这两个项目。即，输入值+对应的选择项。

Fiddle

Answer 1

要创建输入值数组，可以使用map()：

var onClick = function() {
    var values = $('#sub1 .myInpCls').map(function() {
        return this.value;
    }).get();

    //use the values array here...
    console.log(values);
};
$('#button').click(onClick);

Working example

Answer 2

我会循环tr并搜索input和select。你可以做任何你想做的事。

Your updated example.

$('#button').click(function() {
    $("#sub1 tr").each(function() {
        var input = $(this).find(".myInpCls").val() || 0,
            select = $(this).find(".mySelCls").val() || 0,
            value = parseInt(input) + parseInt(select);

        alert(value);
    });
});

Answer 3

我清理了一下你的代码。请注意，我的回答考虑了用户未填满所有字段的情况。

$("#button").click(function(){
  var append_array = [];
  $("tr").each(function(){
    var input = $(this).find("input").val();
    var select = $(this).find("select").val();
    
    (input != '' ? append_array.push(input) : '');
    append_array.push(select);
  });
  console.log(append_array);
  return append_array;
  
});

<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
  <body>

<input type="button" id="button" value="Click Me" />

<table style="width: 100%" id="sub1">
    <tr>
        <td><input class="myInpCls" type="text" /></td>
        <td><select class="mySelCls">
                <option value="1">value 1</option>
                <option value="2">value 2</option>
        </select></td>
    </tr>
    <tr>
        <td><input class="myInpCls" type="text" /></td>
        <td><select class="mySelCls">
                <option value="3">value 3</option>
                <option value="4">value 4</option>
        </select></td>
    </tr>
</table>
    </body>
  </html>

Answer 4

＆＃13;

 var onClick = function() {
   var result= [];
        var inputs = $("#sub1").find('.myInpCls');
        for(var i=0; i < inputs.length;i++){
                var el = inputs[i];
          result.push($(el).val());
          }   
   alert(result.join(","));
    };

$('#button').click(onClick);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />

<table style="width: 100%" id="sub1">
    <tr>
        <td><input class="myInpCls" type="text" /></td>
        <td><select class="mySelCls">
                <option value="1">value 1</option>
                <option value="2">value 2</option>
        </select></td>
    </tr>
    <tr>
        <td><input class="myInpCls" type="text" /></td>
        <td><select class="mySelCls">
                <option value="3">value 3</option>
                <option value="4">value 4</option>
        </select></td>
    </tr>
</table>

＆＃13;

这将为您提供逗号分隔的文本框值，我希望这是您正在寻找的。

请标明答案是否适合您

Answer 5

试试这个代码段。

var onClick = function() {
  var inputs = $("#sub1").find('.myInpCls');
  var arr = [];
  for (var i = 0; i < inputs.length; i++) {
    var el = inputs[i];
    arr.push("input #" + i + ' : ' + $(el).val());
  }
  var selects = $("#sub1").find('.mySelCls');
  for (var j = 0; j < selects.length; j++) {
    var sel = selects[j];
    arr.push("select #" + j + ' : ' + $(sel).val());
  }
  alert(arr);
};
$('#button').click(onClick);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />

<table style="width:100%" id="sub1">
  <tr>
    <td>
      <input class="myInpCls" type="text" />
    </td>
    <td>
      <select class="mySelCls">
        <option value="1">value 1</option>
        <option value="2">value 2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <input class="myInpCls" type="text" />
    </td>
    <td>
      <select class="mySelCls">
        <option value="3">value 3</option>
        <option value="4">value 4</option>
      </select>
    </td>
  </tr>
</table>

获取动态生成的TR的组合TD的值

5 个答案: