如何在JQuery中动态更改行的`id`？

问题描述 投票：0回答：3

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

但是，问题是我想更改每一行的ID，例如

search1
，
search2
，
search3
。

为了检查这一点，我在 

id
中显示 
alert()
，但警报框中仅显示第一行 
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);
          
      });
javascript jquery html mysql jsp
3个回答
0
投票

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

尝试以下代码

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

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

0
投票

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

首先你需要定义你的 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>

0
投票

我认为你应该了解 jquery 是如何工作的。 这都是关于选择器的。应用于 

id
的选择器选择零个或一个元素。应用于类的选择器会选择更多元素。您应该阅读常见问题解答：如何使用类别或 ID 选择项目？.

读完这篇文章后，我开始意识到您的代码有什么问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.