使用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());
}

你已经非常接近了。工作JSFiddle。

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

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

使用td作为选择器,您选择的是表单元格,但它实际上是您想要的输入。使用.html()将为您提供表单元格的实际HTML文本内容,您真正想要的是输入值,这是使用.val()获得的。

编辑-一些建议:

您的代码混合了jQuery和香草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"))) {

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

接下来,将Javascript包含在HTML中被认为是一种糟糕的做法,比如onClick()处理程序。更好的方法是将它们分开,并在JS中添加事件处理程序,例如:

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

还要注意,当您使用JS处理表单提交时,您(可能?(不希望发生标准HTML表单提交。要停止这种情况,您需要使用自动传递给任何事件处理程序的event参数,并停止它——您可以使用:

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

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

最新更新