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

Question

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

但问题是，我想改变像每行的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);
          
      });

Answer 1

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

试试下面的代码

$(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选择器选择零或一个元素。 应用于类的选择器选择更多元素。 您应该阅读常见问题解答：如何使用类或 ID 选择项目？ .

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

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

问题描述

3 个解决方案

解决方案1
0 2018-01-20 09:14:59

解决方案2
0 2018-01-20 09:24:38

解决方案3
0 2018-01-20 13:37:57

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

问题描述

3 个解决方案

解决方案1 0 2018-01-20 09:14:59

解决方案2 0 2018-01-20 09:24:38

解决方案3 0 2018-01-20 13:37:57

解决方案1
0 2018-01-20 09:14:59

解决方案2
0 2018-01-20 09:24:38

解决方案3
0 2018-01-20 13:37:57