如何获取索引的值并在输入文本中显示它

时间:2017-05-15 07:16:12

标签: jquery

我有一个问题我正在尝试获取索引的每个值,我想在每个输入框上单独显示它但我在我的代码中卡住某个地方而我实际上并不知道如何分离所有这些值使用jquery。我需要帮助!

这是我的代码: -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My table</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){

            $('.studtbl tr').click(function(){

                $(this).css({"background":"#f2f2f2"});
                alert($(this).text());
                $(this).find("td").each(function(index,i){


                     console.log( index+ ": " + $( this ).text() );
                     //console.log($(this).get(0).val('0'));
                     console.log("------------------");
                     console.log(i);

                     i++;

                });
            })
            console.log(myarray.val);
        });
    </script>
</head>
<body>
<table border="1">
<tr>
            <td><input type="text" id="name"></td>
            <td><input type="text" id="email"></td>
            <td><input type="text" id="age"></td>
            <td><input type="text" id="gender"></td>
            <td><input type="text" id="height"></td>
</tr>   
</table>
    <table border="1" class="studtbl">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Age</th>
            <th>Gender</th>
            <th>Height</th>
        </tr>
        <tr>
            <td>pqr</td>
            <td>pqr@gmal.com</td>
            <td>21</td>
            <td>M</td>
            <td>6 feet</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>abc@gmal.com</td>
            <td>23</td>
            <td>M</td>
            <td>5 feet 7 inches</td>
        </tr>
        <tr>
            <td>xyz</td>
            <td>xyz@gmal.com</td>
            <td>27</td>
            <td>M</td>
            <td>5 feet 9 inches</td>
        </tr>



    </table>
</body>
</html>

我想在每个输入框中单独索引位置的所有值,其中id为姓名,电子邮件,年龄,性别,身高。

1 个答案:

答案 0 :(得分:2)

您可以使用void将值输入每个输入字段。

$("table input").eq(index).val($(this).text())将输入等于我们循环的当前$("table input").eq(index)

您可以在下面的示例中尝试此操作。

td
$(document).ready(function() {

  $('.studtbl tr').click(function() {
    if ($(this).index() > 1) {

      $(this).css({
        "background": "#f2f2f2"
      });
      $(this).find("td").each(function(index, i) {

        $("table input").eq(index).val($(this).text())
        $("table tr:eq(0) button").attr("data-row", $('.studtbl tr').index($(this).closest('tr')));

      });
    }
  })

});

$('.save').click(function() {
  var row = $(this).attr("data-row");
  $('.studtbl tr td input').each(function(index, i) {
    $('.studtbl tr:eq(' + row + ') td').eq(index).text($(i).val())
  })
})
input {
  width: 100%;
}