如何在jquery中的append函数中为html标签生成变量id

how to generate variable ids for html tags inside append function in jquery

本文关键字：标签 html id 变量 jquery 中的 函数 append      更新时间：2023-09-26

这是我的代码，我想在append函数内为html标记生成变量id，而id在声明变量但不在内部的外部生成。。

  <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery Bind onclick Event to Dynamically added Elements</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="scriptj.js"></script>
    <script type="text/javascript">
        i=0;
        $(document).ready(function(){
            $("#add").click(function func(){
                ++i;
                console.log(i);
                var rem = 'remove' + i; //  here the ids are generating but they 
                var tblid = 'id' + i;   // not going inside append function
                var imgdiv = 'idiv' + i; 
                var imag = 'img' + i;
                $("#diva").append("<div id=tblid style='border:2px solid black; border-radius:5px;'><table align='right'><tr><td><a href='javascript:void(0);' id=rem >Delete</a></td></tr></table><table  align='center'><tr><td>Section Title</td><td><input type='textbox' size='160' /></td></tr><tr><td>Descrtiption</td><td><textarea rows='5' cols='162' style='border-radius:5px;'></textarea><td></tr></table><br>&nbsp &nbsp<input type='file' onchange='readURL(this);'/><div id=imgdiv style='border: 1px solid black'><img id=imag alt='your image' /></div></div><br>"); 
            });
            $(document).on("click", "a#rem" , function() {  
                $(this).parent().parent().parent().parent().parent().remove();  
            });
        }); 
    </script>
    </head> 
    <body>
        <table><tr><td><button id="add" style='border-radius:3px;'>Add Section</button></td></tr></table>
        <br>
        <div id="diva">
        </div>
    </body> 
    </html>

您没有调用代码中的变量。它们被解释为字符串。

例如，在代码的这一部分中：

 $("#diva").append("<div id=tblid style='border:2px solid black; ....

tblid被认为是一个字符串，而不是一个变量。您需要连接字符串和变量，如下所示：

$("#diva").append("<div id=" +tblid+ " style='border:2px solid black; ...

在构建标记时使用变量。

  var rem = 'remove' + i; //  here the ids are generating but they 
                var tblid = 'id' + i;   // not going inside append function
                var imgdiv = 'idiv' + i; 
                var imag = 'img' + i;
  var m ="<div id='"+tblid+"' style='border:2px solid black; 
           border-radius:5px;'><table align='right'><tr><td><a href='javascript:void(0);' 
          id='"+rem+"' >Delete</a></td></tr></table>
        <table  align='center'>
        <tr><td>Section Title</td><td><input type='textbox' size='160' /></td></tr>
        <tr><td>Descrtiption</td><td><textarea rows='5' cols='162' 
        style='border-radius:5px;'></textarea><td></tr></table>
        <br>&nbsp &nbsp<input type='file' onchange='readURL(this);'/>
        <div id='"+imgdiv+"' style='border: 1px solid black'>
        <img id='"+imag+"' alt='your image' /></div></div>"; 
 $("#diva").append(m);

但是，您并不总是需要设置这些id。您总是可以使用closest()、find()方法来获取相关项。如果您想保留一些要发送的数据，请将其保留在HTML5属性中。

您应该这样编写.append()，因为您正在连接一个变量。

$("#diva").append("<div id='" + tblid + '>");
相关文章：