获取表格内的type = text的值

时间:2016-11-15 13:53:36

标签: javascript jquery html

我想在文本字段中获取值。 textField位于表中的<td>内。当我单击按钮时,我想要文本字段内的文本,并使用标签使其完美。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Bind Click Event to Dynamically added Elements</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

            $('#main').on("click", 'input[type="button"]', function () {
                var customerId = $(this).parent().siblings('td:eq(2)').text();
                $('#texti').text(customerId);
            });

  });


</script>
</head>
<body>
    <button>Add new list item</button>
    <p>Click the above button to dynamically add new list items. You can remove it later.</p>
    <table id="main">
    <tr>
        <td>list item 1 </td>
        <td><input type='text' name='textN' id='textN' value='asdf'/></td>
        <td>list item 3 </td>
        <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td>
    </tr>
    <tr>
        <td>list item 4</td>
        <td><input type='text' name='textN' id='textN' value='asdf2'/></td>
        <td>list item 6</td>
        <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td>
    </tr>
    <tr>
        <td>list item 7</td>
        <td><input type='text' name='textN' id='textN' value='asdf3'/></td>
        <td>list item 9</td>
        <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td>
    </tr>
    </table>
    <a name="texti" id="texti"> x </a>
</body> 
</html>   

它给了我一个空白变量。如何解决?

2 个答案:

答案 0 :(得分:2)

您只需要find从当前行输入并使用.val()获取其值。

以下是解决方案:jsfiddle

 $('#main').on("click", 'input[type="button"]', function () {
            var customerId = $(this).parent().siblings('td:eq(1)').find('input').val();
            $('#texti').text(customerId);
 });

答案 1 :(得分:0)

使用.val()代替.text().val()用于输入值,.text()尝试在标记之间获取文字。