如何在 JQuery 中动态更改行的 ID答案

【问题标题】：How to change the Id of row dynamically in JQuery如何在 JQuery 中动态更改行的 ID
【发布时间】：2018-06-29 11:03:10
【问题描述】：

这是我的简单 HTML 页面。在这个程序中，当我按回车键创建动态行时，它会创建一个新行。

但问题是我想更改每一行的 ID，例如 search1,search2,search3。

为了检查这一点，我在警报中显示 id，但在警报框中只显示第一行 id。当我检查页面并检查第二行的 id 时，它改变了 id。

<%@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>

这是创建动态行的 JQuery：

 $(document).keypress(
    function(event){
     if (event.which == '13') {
        event.preventDefault();
      }
});

var i = $('table tr').length;
var count=0;
$(document).on('keyup', '.lst', function(e) 
{
  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>';
    
    $('table').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();
  }
});

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

【问题讨论】：

当您将keyup 函数绑定到您的searchname 元素时，页面中只有一个，因此只有一个会绑定到该函数。
@GiulioAmbrogi 你是对的，但你忘记了正在创建新的动态输入，所以一开始有一个，但会创建更多行。
@CesarBielich 不，我知道这一点。我要告诉你的是，当只有 1 个元素时，你正在运行 keyup 函数仅一次。如果您在之后再创建 100 个元素，则还需要将 keyup 函数绑定到它们。
这个简单的由jsp打补丁的HTML页面

标签： javascript jquery html mysql jsp

【解决方案1】：

我认为你需要使用 $(document).on 而不是 $('.searchName').keyup 函数

试试下面的代码

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

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

【讨论】：

【解决方案2】：

不得不更改你的一些代码，发现很多错误，但我想我已经解决了你。

首先你需要定义你的 html 变量，所以我添加了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>

【讨论】：

【解决方案3】：

我认为您应该了解 jquery 的工作原理。这都是关于选择器的。应用于id 的选择器选择零或一个元素。应用于类的选择器选择更多元素。您应该阅读常见问题解答：How do I select an item using class or ID?。

读完这篇文章后，我明白了你的代码有什么问题。

【讨论】：