Question

这是我简单的HTML页面。在此程序中，当我按Enter键创建动态行时，它会创建一个新行。但问题是我想改变每一行的id - search1，search2，search3。

为了检查这个，我在警告中显示id，但是只有第一行id显示在警告框中，但是当我检查页面并检查第二行的id时，它改变了id。那我该怎么办？

var catalog = ["apple", "james", "hello", "drink"],
    string = "James always drinks water",
    result = string
        .split(/\W+/)
        .filter(word => catalog.some(c => word.toLowerCase().includes(c)));
        
console.log(result);

这是创建动态行的Jquery

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" href="Bootstrap/bootstrap.css" rel="stylesheet"/>
        <title>JSP Page</title>
    </head>
    <body>

        <br><br>
    <center>
        <div class="container-fluid">
        <div class="row">
        <div class="col-lg-8">

        <div class="table-responsive">
        <table class="table-responsive table-bordered">
        <thead>
        <tr>
            <th>No.</th>
            <th>Name</th> 
            <th>Price</th> 
        </tr>   
        </thead>    

        <tbody>
            <tr>
                <td align="center">1</td>
                <td><input type="text" class="inputs searchName" name="pname_1" size="15" id="search1"/></td>    
                <td><input type="text" class="inputs lst" size="15" /></td>    

            </tr>
        </tbody>
        </table>
        </div>
        </div>
        </div>
        </div>
    </center>

        <script type="text/javascript" src="Bootstrap/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="Bootstrap/bootstrap.js"></script>

Answer 1

我认为你需要使用 $（document）.on 而不是$（'。searchName'）。keyup function

尝试以下代码

$(document).on('keyup', '.searchName', function() {    
  var id=$(this).attr("id");
  alert(id);    
});

这是工作的jsfiddle：https://jsfiddle.net/r9hpyabh/

Answer 2

不得不改变你的一些代码，发现了很多错误，但我想我已经把你摆平了。

首先你需要定义你的html var，所以我添加了var html;

第二次，您的html var重复了之前的HTML，因此您需要将每个新$(document).on('keyup', '.lst', function(e) {删除，因此我添加了html = '';

第三，您需要将$('.searchName').keyup(function() {更改为$(document).on('keyup', '.searchName', function() {以考虑动态内容。

请记住，无论何时处理动态内容，都需要使用$(document).on('event', 'class or id', function() {来捕获动态内容。

var i = $('table tr').length;
var count = 0;
var html;
$(document).on('keyup', '.lst', function(e) {
  html = '';
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 13) {
    count = $('table tr').length;

    html += '<tr>';
    html += '<td align="center">' + i + '</td>';
    html += '<td><input type="text" class="inputs searchName"  size="15" name="pname_' + i + '" id="search' + i + '" /></td>';
    html += '<td><input type="text" class="inputs lst"  size="15" /></td>';

    html += '</tr>';

    $('tbody').append(html);
    $(this).focus().select();
    i++;
  }
});

$(document).on('keydown', '.inputs', function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 13) {
    var index = $('.inputs').index(this) + 1;
    $('.inputs').eq(index).focus();
  }
});

$(document).on('keyup', '.searchName', function() {
  var id = $(this).attr("id");
  alert(id);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>JSP Page</title>
</head>

<body>
  <center>
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-8">

          <div class="table-responsive">
            <table class="table-responsive table-bordered">
              <thead>
                <tr>
                  <th>No.</th>
                  <th>Name</th>
                  <th>Price</th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <td align="center">1</td>
                  <td><input type="text" class="inputs searchName" name="pname_1" size="15" id="search1" /></td>
                  <td><input type="text" class="inputs lst" size="15" /></td>

                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </center>

Answer 3

我认为你应该学习jquery是如何工作的。这完全取决于选择者。应用于id的选择器选择零个或一个元素。应用于类的选择器选择更多元素。您应该阅读常见问题解答：How do I select an item using class or ID?。

阅读本文后，我开始了解您的代码有什么问题。

Jquery动态表无法正常工作

3 个答案: