我有一个html页面，其中input字段可以添加删除。通过点击＆＃34;在最后input字段上输入＆＃34; 并通过点击组合＆＃34; CTRL + Backspace＆＃34; 在input字段中。
如果我只是添加或删除最后一个input字段，这样可以正常工作。 如果我开始删除中间的input字段，则无效。它不起作用，因为我通过 id-attribute 识别最后一行最后一个tr，如果我在中间删除input字段，概念将不再起作用。
作为当前的解决方案，我想知道活动tr的索引，这样我就不必转发我的 id-attributes 。使用当前tr我的意思是具有焦点的输入字段。 但是在这里我很挣扎，我只能使用 id-attribute 访问当前位置。
// get id from active element
activeElementID = $( position ).attr( 'id' );
我试图获取索引，但是我没有得到任何回报，它的索引为0：
// get id from active element
activeElementID = $( position ).attr( 'id' );
aEl = $( position ).parent( ).index( );
console.log( "INDEX: " + aEl );
// output on every input field: "INDEX: 0"
如何识别当前的tr索引，并对其进行处理，例如：删除当前的tr？
重要：每个tr行绑定到数组中的对象（在我的代码中称为Dom），tr的索引和数组的索引应该是相同的，以便我知道哪一行属于数组中的哪个元素。该数组将在tr / input字段中存储我需要的内容。
我对其他解决方案也是开放的，可以使用所描述的行为添加和删除行，并且行应该耦合到我可以访问的对象并存储其他信息
这是我目前的解决方案，我需要知道如何识别当前tr索引：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Row test</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
// global function
// zeilen ID: zeileX, withouth #
function zeilenID( id ) {
return "zeile" + id;
}
// css zeilen ID: #zeileX
function zID( id ) {
return "#" + zeilenID( id );
}
function inputID( id ) {
return "input" + id;
}
function iID( id ) {
return "#" + inputID( id );
}
// array that holds the line.
// lastline is the lineID of the last line
Dom = function( ) { };
Dom.prototype.dom = new Array();
// Dom.prototype.lastline = "not set";
// new object to hold the data in the Dom
Line = function( ) { };
Line.prototype.variable = "var-name";
// obj, should be a foo Dom object
function addRow( obj ) {
nLine = foo.dom.length; // size of array 2
obj.dom.push( new Line ); // new size of array 3. Thats why nLine must come before!!!
$( "#lines tr:last" ).after( "<tr><td id='"+ zeilenID( nLine ) +"'><input type='text' id='" + inputID( nLine ) + "' value='" + nLine + "'></input></td></tr>" );
//foo.lastline = nLine; // inputID( key );
$( iID( nLine ) ).focus( );
}
function rmRow( obj, id ) {
obj.dom.splice( id, 1 );
}
$(document).ready(function(){
// create a new Dom call foo
foo = new Dom( );
console.log( "count: " + foo.dom.length );
// add a new array element
foo.dom.push( new Line );
// create a new Line called linie
linie = new Line( );
// change the content of variable
linie.variable = "platzhalter";
foo.dom.push( linie );
$.each( foo.dom, function( key, val ) {
console.log( key );
for( kex in val ) {
console.log( "> " + kex + ": " + val[kex] );
}
$( "#lines tr:last" ).after( "<tr><td id='"+ zeilenID( key ) +"'><input type='text' id='" + inputID( key ) + "' value='" + val['variable'] + "'></input></td></tr>" );
// foo.lastline = key; // inputID( key );
} );
});
$(document).keypress(function(e) {
if(e.which == 13) {
// alert('You pressed enter!');
// get active element
position = document.activeElement;
// get id from active element
activeElementID = $( position ).attr( 'id' );
aEl = $( position ).parent( ).index( );
console.log( "INDEX: " + aEl );
console.log( "focus element id: " + activeElementID );
console.log( "last count: " + foo.dom.length );
lastline = inputID( foo.dom.length - 1 );
amountOfRows = $( "#lines tr" ).length - 1; // as we have one tr more, the heading
if ( activeElementID == lastline ) {
addRow( foo );
}
}
// CTRL + Backspace
if (e.ctrlKey) { // CTRL
if ( e.which == 8 ) { // Backspace
console.log( "BACKSPACE.... with CTRL" );
position = document.activeElement;
// get id from active element
activeElementID = $( position ).attr( 'id' );
activeNum = activeElementID.substr( -1 );
$( zID( activeNum ) ).remove( );
rmRow( foo, activeNum );
console.log( "removed row: " + activeNum );
$( iID( activeNum - 1 ) ).focus( );
}
}
});
</script>
</head>
<body>
答案 0 :(得分：0)
使用parent()，prop()和rowIndex计算出来。
aEl = $( position ).parent( ).parent( ).prop( 'rowIndex' ) - 1;
console.log( "INDEX: " + aEl );