时间戳

首页 > 解决方案 > 使用 jQuery 查找表的最后一个输入值时遇到问题，我的函数只返回 jibberish。你如何获得最后一行输入值？

jquery - 使用 jQuery 查找表的最后一个输入值时遇到问题，我的函数只返回 jibberish。你如何获得最后一行输入值？

问题描述

对不起，基本问题。我大约 5 天前才开始学习 Javascript。我有一个这样的 HTML 表单/表格：

<body>
    <form onsubmit="playland()">
    <table id="dynamictable"> <!-- Added an id to the table element to easily select it and keep track of the rows -->
        <tr>
            <td>Name</td>
            <td>Location</td>
            <td>From</td>
            <td>To</td>
        </tr>

        <tr class="tr_clone">
            <td>
                <input type="text" autofocus placeholder="who" name="add" class="tr_clone_add" >
            </td>
            <td>
                <input type="text" autofocus placeholder="location" name="location" >
            </td>
            <td>
                <input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker">
            </td>
            <td>
                <input type="text" placeholder="End Date" name="datepicker_end" class="datepicker">
            </td>
        </tr>
    </table>

    <button  action="submit">Click me</button>
    </form>
</body>

一旦输入输入到最后一行，有一个函数可以更新行。这就是那个功能：

$(document).on('input', 'input.tr_clone_add', function() {


    if(document.getElementById("dynamictable").tBodies[0].rows.length ==    
            (this.parentNode.parentNode.rowIndex + 1)) {                        
                var $tr    = $(this).closest('.tr_clone');
                var $clone = $tr.clone();
                $clone.find(':text').val('');
                $tr.after($clone);
        }                                                                       
    });

然后这是我想要制作的功能。我不想获取最后一个表输入值并将其存储在变量中。虽然它现在只是返回一堆乱码，但我无法弄清楚为什么我的生活。

function playland(){
    alert($("#dynamictable tr:last").prev().find("td").html());
}

标签： jquery

解决方案

你已经很亲近了。 工作 JSFiddle。

假设嵌套$(document).on('input', ...处理程序只是一个错字，以下是您如何获取倒数第二个表行中最后一个输入的值（因为最后一行现在是新的空克隆）：

alert($("#dynamictable tr:last").prev().find("input:last").val());

使用td作为您的选择器，您正在选择表格单元格，但它确实是您所追求的输入。并且 using.html()将为您提供表格单元格的实际文字 HTML 内容，您真正想要输入值的地方 - 您可以使用.val().

编辑 - 一些建议：

您的代码将 jQuery 与 vanilla Javascript 混合在一起。从技术上讲，这没有什么问题，但它更难阅读和使用。如果你有可用的 jQuery，你也可以使用它。

这个简单的 JS：

document.getElementById("dynamictable").rows.length

可以用 jQuery 写成：

$('#dynamictable tr').length

jQuery 选择器匹配所有行，并.length会告诉我们我们得到了多少匹配。

这个简单的 JS：

this.parentNode.parentNode.rowIndex

有点诡计，但这个 jQuery 有效：

$(this).closest('tr').index()

$(this)在这种情况下是指input接收输入的元素。 closest('tr')找到最近的父行，这将是输入所在的行。并且index()，以这种格式，将告诉我们该元素在其兄弟元素中的（从零开始的）位置。

只是为了好玩，您还可以将整个测试编写为：

if ($(this).closest('tr').is($("#dynamictable tr:last"))) {

这只是检查具有输入的行是否实际上等于表中的最后一行。这可能比其他版本更具可读性和可理解性。

接下来，在 HTML 中包含内联 Javascript 被认为是不好的做法，例如onClick()处理程序。更好的方法是将它们分开，并在您的 JS 中添加事件处理程序，例如：

$('form').on('submit', playland);

另请注意，当您使用 JS 处理表单提交时，您（可能？）不希望发生标准的 HTML 表单提交。要停止这种情况，您需要使用event自动传递给任何事件处理程序的参数，然后停止它 - 您可以这样做：

function playland(event){
    event.preventDefault();
    // ... rest of your code

这是一个更新的 JSFiddle，其中包含了所有这些更改。

推荐阅读