jQuery从最近的方法查找第一行

时间:2015-09-16 01:49:36

标签: javascript jquery

使用jQuery,我试图根据具有焦点的控件在表中找到给定列的第一行。以下类型的工作,但它找到给定列的最后一行。我想让它找到第一行。

var $next= $('input:focus').closest('table').find('td:nth-child(3)').find('input')

我相信这是最后一行,因为使用了最近的()'从底部开始遍历元素的方法。

最终使用的是使用箭头键在表格中导航。它基于这个有用的代码,有人很友好地分享:https://gist.github.com/krcourville/7309218

编辑:根据要求添加额外的更全面的jquery和html。

jQuery(精简版):

<script>
$('table.arrow-nav').keydown(function(e){
    switch(e.which){
        case //... other cases for other keycodes ...
        case e.ctrlKey && 38: // <ctrl> + <Up>
            $next = $('input:focus').closest('tr').parent().find("tr:first").find('td:nth-child(3)').find('input');
            break;
    }
    if($next && $next.length){
        $next.focus();
    }
});
</script>

HTML:

<html>
<head></head>
<body>
    <table class="arrow-nav" border="1" cellpadding="2" cellspacing="2">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
    </tr>
    <tr>
        <td><input id="ctl_1_1" type="text"></td>
        <td><input id="ctl_2_1" type="text"></td>
        <td><input id="ctl_3_1" type="text"></td>
        <td><input id="ctl_4_1" type="text"></td>
    </tr>
    <tr>
        <td><input id="ctl_1_2" type="text"></td>
        <td><input id="ctl_2_2" type="text"></td>
        <td><input id="ctl_3_2" type="text"></td>
        <td><input id="ctl_4_2" type="text"></td>
    </tr>
    <tr>
        <td><input id="ctl_1_3" type="text"></td>
        <td><input id="ctl_2_3" type="text"></td>
        <td><input id="ctl_3_3" type="text"></td>
        <td><input id="ctl_4_3" type="text"></td>
    </tr>
</table>
</body>
<html>

2 个答案:

答案 0 :(得分:0)

试试这个

     public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

ListView listView = (ListView) findViewById(R.Id.listview);

        final AssetManager assetManager = getAssets();
        try {
            // for assets folder add empty string
                        String[] filelist = assetManager.list("");
                        // for assets/subFolderInAssets add only subfolder name
                        String[] filelistInSubfolder = assetManager.list("subFolderInAssets");
            if (filelist == null) {
                // dir does not exist or is not a directory
            } else {
                for (int i=0; i<filelist.length; i++) {
                    // Get filename of file or directory
                    String filename = filelist[i];
                }
            }

                        // if(filelistInSubfolder == null) ............  

        } catch (IOException e) {
            e.printStackTrace();
        }
     }

答案 1 :(得分:0)

您可以使用ID来引用每一行:

$(function() {
  $('input').on('focus', function(event) {
    var foc = $(this).attr('id');
    var ctl = parseInt(foc.charAt(6), 10);
    var next = $('tr')[ctl];
    if (next === $('tr')[2]) {
      next = $('tr')[0];
    }
    console.log('Focused input is ' + foc);
    console.log('The next row is ' + (ctl + 1));
  });
});
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Next Row</title>
</head>

<body>
  <table class="arrow-nav" border="1" cellpadding="2" cellspacing="2">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
    <tr>
      <td>
        <input id="ctl_1_1" type="text">
      </td>
      <td>
        <input id="ctl_2_1" type="text">
      </td>
      <td>
        <input id="ctl_3_1" type="text">
      </td>
      <td>
        <input id="ctl_4_1" type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input id="ctl_1_2" type="text">
      </td>
      <td>
        <input id="ctl_2_2" type="text">
      </td>
      <td>
        <input id="ctl_3_2" type="text">
      </td>
      <td>
        <input id="ctl_4_2" type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input id="ctl_1_3" type="text">
      </td>
      <td>
        <input id="ctl_2_3" type="text">
      </td>
      <td>
        <input id="ctl_3_3" type="text">
      </td>
      <td>
        <input id="ctl_4_3" type="text">
      </td>
    </tr>
  </table>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

</body>

</html>