很抱歉有基本问题。我大约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,包含了所有这些更改。