JS怎么获取td里面的第二个input输入框值?|极客笔记

JS怎么获取td里面的第二个input输入框值?

在网页开发中，我们经常会遇到需要获取表格（table）中某一行（tr）中特定单元格（td）中的输入框（input）的值的情况。当我们需要获取表格中的某个特定输入框的值时，我们可以通过JavaScript来实现。

方法一：通过表格的行数和列数来获取

我们可以通过表格的行数和列数来遍历获取特定行和列中的输入框值。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>获取表格中输入框的值</title>
</head>
<body>
    <table id="myTable">
        <tr>
            <td><input type="text" value="input1"></td>
            <td><input type="text" value="input2"></td>
        </tr>
    </table>

    <button onclick="getValue()">获取值</button>

    <script>
        function getValue() {
            var table = document.getElementById("myTable");
            var input = table.rows[0].cells[1].getElementsByTagName('input')[0];
            var value = input.value;
            console.log(value);
        }
    </script>
</body>
</html>

在上面的示例代码中，我们首先通过document.getElementById("myTable")获取到id为myTable的表格元素，然后通过table.rows[0].cells[1].getElementsByTagName('input')[0]来获取第一行的第二个单元格中的输入框元素，最后通过input.value获取输入框的值并输出到控制台。当我们点击按钮时，就会输出第二个输入框的值。

方法二：使用querySelector获取指定的第二个input值

另一种方法是使用querySelector来获取指定的第二个input值。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>获取表格中输入框的值</title>
</head>
<body>
    <table>
        <tr>
            <td><input type="text" value="input1"></td>
            <td><input type="text" value="input2"></td>
        </tr>
    </table>

    <button onclick="getValue()">获取值</button>

    <script>
        function getValue() {
            var input = document.querySelector("td:nth-child(2) input");
            var value = input.value;
            console.log(value);
        }
    </script>
</body>
</html>

在上面的示例代码中，我们使用document.querySelector("td:nth-child(2) input")来选取第二个td中的input元素，然后通过input.value获取输入框的值并输出到控制台。同样，当我们点击按钮时，就会输出第二个输入框的值。