我怎么能得到ID /生成动态生成的元素在HTML使用jQuery的ID？ [英] how can i get id/ generate id of dynamically generated elements in html using jquery?

查看：107
本文介绍了我怎么能得到ID /生成动态生成的元素在HTML使用jQuery的ID？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

你好，我有一张学生档案表格供学生填写他们的详细资料。
学生可以添加学校，添加高中，并通过点击添加学校，添加高中并添加学院锚标签来动态地添加大学。



此表单的代码如下

 < script type =text / javascript> 
 $（document）.ready（function（）{
 $（'。studentprofileupdateBody a'）。click（function（）{
 console.log（'ok'）; 
 $ var $ tr = $（this）.closest（'tr'）。prev（）
 var clone = $ tr.clone（）; 
 $ tr.after（clone）; 
 }）; 
}）; 
< / script> 
 
 
< form method =postaction => 
 
< table width =100％> 
< tr> 
< td> 
< div id =教育> 
< table class =Studentprofileid =tblEducation> 
< tr> 
< td colspan =2>< br />教育详情< / td> 
< / tr> 
< tr id =schoolRowname =schoolRow> 
< td class =studentprofileupdateHead> 
< label for =schools>学校：< / label> 
< / td> 
< td class =studentprofileupdateBodyid =schools> 
< input type =textid =s1name =s1title =S1>< / input> 
< select name =selSYear> 
< option value =0> -Select-< / option> 
< option value =1> 2010< / option> 
< option value =2> 2009< / option> 
< option value =3> 2008< / option> 
< option value =4> 2007< / option> 
< option value =5> 2006< / option> 
< option value =6> 2005< / option> 
< option value =7> 2004< / option> 
< option value =8> 2001< / option> 
< option value =8> 2000< / option> 
< // select> 
< / td> 
< / tr> 
< tr> 
< td class =studentprofileupdateHead> 
< / td> 
< td class =studentprofileupdateBody> 
< a href =＃>新增学校< / a> 
< / td> 
< / tr> 
< tr> 
< td colspan =2>< br />< hr class =profileUpdate/>< br />< / td> 
< / tr> 
< tr id =highschoolRowname =highschoolRow> 
< td class =studentprofileupdateHead> 
< label for =highschool>高中：< / label> 
< / td> 
< td class =studentprofileupdateBodyid =highschool> 
< input type =textid =hs1name =hs11title =HS1/> 
 < option value =0> -Select-< / option> 
< option value =1> 2010< / option> 
 
< option value =2> 2009< / option> 
< option value =3> 2008< / option> 
< option value =4> 2007< / option> 
< option value =5> 2006< / option> 
< option value =6> 2005< / option> 
< option value =7> 2004< / option> 
 
< option value =8> 2001< / option> 
< option value =8> 2000< / option> 
< // select>> 
< br>< br /> 
 
< hr class =profileSubSection/> 
< / td> 
< / tr> 
< tr> 
 
< td class =studentprofileupdateHead> 
< / td> 
< td class =studentprofileupdateBody> 
< a href =＃>新增高中< / a> 
< / td> 
< / tr> 
< tr> 
< td colspan =2>< br />< hr class =profileUpdate/>< br />< / td> 
 
< / tr> 
< tr id =collegeRowname =collegeRow> 
< td class =studentprofileupdateHead> 
< label for =college>大学：< / label> 
< / td> 
< td class =studentprofileupdateBodyid =college> 
< input type =textid =co1name =co1title =CO1/> 
< select name =selColYear> 
 
< option value =0> -Select-< / option> 
< option value =1> 2010< / option> 
< option value =2> 2009< / option> 
< option value =3> 2008< / option> 
< option value =4> 2007< / option> 
< option value =5> 2006< / option> 
 
< option value =6> 2005< / option> 
< option value =7> 2004< / option> 
< option value =8> 2001< / option> 
< option value =8> 2000< / option> 
< // select> 
< br>< br /> 
 
< hr class =profileSubSection/> 
 
< / td> 
< / tr> 
< tr> 
< td class =studentprofileupdateHead> 
< / td> 
< td class =studentprofileupdateBody> 
< a href =＃>添加大学< / a> 
< / td> 
 
< / tr> 
< tr> 
< td colspan =2>< br />< hr class =profileUpdate/>< br />< / td> 
< / tr> 
< tr> 
< td class =studentprofileupdateHead> 
< / td> 
< td class =studentprofileupdateBody> 
< input type =submitid =saveStudentEducationInfoname =saveStudentEducationInfotitle =Save Education Infovalue =Save Details/> 
 
< input type =submitid =cancelStudentEducationInfoname =cancelStudentEducationInfotitle =取消教育信息value =取消/> 
< / td> 
< / tr> 
< tr> 
< td colspan =2>< br />< br />< / td> 
< / tr> 
< / table> 
< / div> 
< / td> 
 
< / tr> 
 
< / table> 
< / form>

我希望我的代码为每个元素生成新的id，以便通过它的id清楚地标识每个元素。 / p>

如何为每个元素获取id？

解决方案

使用 .clone 方法，添加它复制一切...
您可以修改ID在哪里正在使用这种方法，如下所示： 

  $（document）.ready（function（）{
 $（ '.studentprofileupdateBody a'）。click（function（）{
 console.log（'ok'）; 
 var $ tr = $（this）.closest（'tr'）。prev（）; 
 var clone = $ tr.clone（）。attr（id，new-id）; 
 $ tr.after（clone）; 
}）; 
 }）;

编辑： 'tr'），你可以这样做： 

  $（document）.ready（function（）{
 var dynamicId，inputName，numberEachType; 
（'。studentprofileupdateBody a'）。click（function（）{
 console.log（'ok'）; 
 var $ tr = $（this） .closest（'tr'）。prev（）; 
 numberEachType = $（'table＃tblEducation tr [name =''+ $ tr.attr（'name'）+']'）。length; 
 dynamicId = $ tr.attr（'name'）+ numberEachType; 
 var clone = $ tr.clone（）。attr（'id'，dynamicId）; //动态ID at< tr> 
 inputName = clone.find（'input'）。attr（'name'）; 
 dynamicId = inputName.substring（0，inputName.length-1）+（numberEachType + 1）; 
 （'name'，dynamicId）.attr（'title'，dynamicId.toUpperCase（））; //动态ID，名称和标题在< ;输入> 
 $ tr.after（clone）; 
}）; 
}）;

试试这里的例子 http://jsfiddle.net/expertCode/NT4Zr/ 并查看源代码，如果这是你想要的。


Hi i have a student profile form where student can fill their details. Student can add school, add high school and add college dynamically by clicking add school, add high school and add college anchor tag.

Code for this form is as below

    <script type="text/javascript">
        $(document).ready(function () {
            $('.studentprofileupdateBody a').click(function () {
                console.log('ok');
                var $tr = $(this).closest('tr').prev()
                var clone = $tr.clone();
                $tr.after(clone);
            });
        });
    </script>


<form method="post" action="">

    <table width="100%">
    <tr>
       <td>
        <div id="Education">
                   <table class="Studentprofile" id="tblEducation">
                        <tr>
                            <td colspan="2"><br/> Education Details</td>
                        </tr>
                        <tr id="schoolRow" name="schoolRow">
                            <td class="studentprofileupdateHead" >
                                <label for="schools">Schools:</label>
                            </td>
                            <td class="studentprofileupdateBody" id="schools">
                                <input type="text" id="s1" name="s1" title="S1"></input>
                                <select name="selSYear">
                                    <option value="0">-Select-</option>
                                    <option value="1">2010</option>
                                    <option value="2">2009</option>
                                    <option value="3">2008</option>
                                    <option value="4">2007</option>
                                    <option value="5">2006</option>
                                    <option value="6">2005</option>
                                    <option value="7">2004</option>
                                    <option value="8">2001</option>
                                    <option value="8">2000</option>
                                <//select>
                            </td>
                        </tr>
                        <tr>
                            <td class="studentprofileupdateHead" >
                            </td>
                            <td class="studentprofileupdateBody">
                                <a href="#">Add Schools</a>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
                        </tr>
                        <tr id="highschoolRow" name="highschoolRow">
                            <td class="studentprofileupdateHead" >
                                <label for="highschool">High School:</label>
                            </td>
                            <td class="studentprofileupdateBody" id="highschool">
                                <input type="text" id="hs1" name="hs11" title="HS1" />
                                <select name="selHSYear">
                                    <option value="0">-Select-</option>
                                    <option value="1">2010</option>
                                    <option value="2">2009</option>
                                    <option value="3">2008</option>
                                    <option value="4">2007</option>
                                    <option value="5">2006</option>
                                    <option value="6">2005</option>
                                    <option value="7">2004</option>
                                    <option value="8">2001</option>
                                    <option value="8">2000</option>
                                <//select>>
                                <br><br/>

                                <hr class="profileSubSection"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="studentprofileupdateHead" >
                            </td>
                            <td class="studentprofileupdateBody">
                                <a href="#">Add High Schools</a>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
                        </tr>
                        <tr id="collegeRow" name="collegeRow">
                            <td class="studentprofileupdateHead" >
                                <label for="college">College:</label>
                            </td>
                            <td class="studentprofileupdateBody" id="college">
                                <input type="text" id="co1" name="co1" title="CO1"/>
                                <select name="selColYear">
                                    <option value="0">-Select-</option>
                                    <option value="1">2010</option>
                                    <option value="2">2009</option>
                                    <option value="3">2008</option>
                                    <option value="4">2007</option>
                                    <option value="5">2006</option>
                                    <option value="6">2005</option>
                                    <option value="7">2004</option>
                                    <option value="8">2001</option>
                                    <option value="8">2000</option>
                                <//select>
                                <br><br/>

                                <hr class="profileSubSection"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="studentprofileupdateHead" >
                            </td>
                            <td class="studentprofileupdateBody">
                                <a href="#">Add College</a>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
                        </tr>
                        <tr>
                            <td class="studentprofileupdateHead" >
                            </td>
                            <td class="studentprofileupdateBody">
                                <input type="submit" id="saveStudentEducationInfo" name="saveStudentEducationInfo" title="Save Education Info" value="Save Details" />
                                <input type="submit" id="cancelStudentEducationInfo" name="cancelStudentEducationInfo" title="Cancel Education Info" value="Cancel" />
                            </td>
                        </tr>
                         <tr>
                            <td colspan="2"><br/><br/></td>
                        </tr>
                    </table>
                </div>
    </td>
    </tr>

    </table>
</form>

It works perfect and add any no of elements dynamically but when i see the page source of this page i get to know that its not generating new elements id.

It looks like this..

Generated New elements but by viewing source code of this page it gives,

    <form method="post" action="">

    <table width="100%">

    <tr>
       <td>
        <div id="Education">
                   <table class="Studentprofile" id="tblEducation">
                        <tr>
                            <td colspan="2"><br/> Education Details</td>
                        </tr>
                        <tr id="schoolRow" name="schoolRow">

                            <td class="studentprofileupdateHead" >
                                <label for="schools">Schools:</label>
                            </td>
                            <td class="studentprofileupdateBody" id="schools">
                                <input type="text" id="s1" name="s1" title="S1"></input>
                                <select name="selSYear">
                                    <option value="0">-Select-</option>
                                    <option value="1">2010</option>

                                    <option value="2">2009</option>
                                    <option value="3">2008</option>
                                    <option value="4">2007</option>
                                    <option value="5">2006</option>
                                    <option value="6">2005</option>
                                    <option value="7">2004</option>

                                    <option value="8">2001</option>
                                    <option value="8">2000</option>
                                <//select>
                            </td>
                        </tr>
                        <tr>
                            <td class="studentprofileupdateHead" >
                            </td>

                            <td class="studentprofileupdateBody">
                                <a href="#">Add Schools</a>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
                        </tr>
                        <tr id="highschoolRow" name="highschoolRow">

                            <td class="studentprofileupdateHead" >
                                <label for="highschool">High School:</label>
                            </td>
                            <td class="studentprofileupdateBody" id="highschool">
                                <input type="text" id="hs1" name="hs11" title="HS1" />
                                <select name="selHSYear">
                                    <option value="0">-Select-</option>
                                    <option value="1">2010</option>

                                    <option value="2">2009</option>
                                    <option value="3">2008</option>
                                    <option value="4">2007</option>
                                    <option value="5">2006</option>
                                    <option value="6">2005</option>
                                    <option value="7">2004</option>

                                    <option value="8">2001</option>
                                    <option value="8">2000</option>
                                <//select>>
                                <br><br/>

                                <hr class="profileSubSection"/>
                            </td>
                        </tr>
                        <tr>

                            <td class="studentprofileupdateHead" >
                            </td>
                            <td class="studentprofileupdateBody">
                                <a href="#">Add High Schools</a>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"><br/><hr class="profileUpdate"/><br/></td>

                        </tr>
                        <tr id="collegeRow" name="collegeRow">
                            <td class="studentprofileupdateHead" >
                                <label for="college">College:</label>
                            </td>
                            <td class="studentprofileupdateBody" id="college">
                                <input type="text" id="co1" name="co1" title="CO1"/>
                                <select name="selColYear">

                                    <option value="0">-Select-</option>
                                    <option value="1">2010</option>
                                    <option value="2">2009</option>
                                    <option value="3">2008</option>
                                    <option value="4">2007</option>
                                    <option value="5">2006</option>

                                    <option value="6">2005</option>
                                    <option value="7">2004</option>
                                    <option value="8">2001</option>
                                    <option value="8">2000</option>
                                <//select>
                                <br><br/>

                                <hr class="profileSubSection"/>

                            </td>
                        </tr>
                        <tr>
                            <td class="studentprofileupdateHead" >
                            </td>
                            <td class="studentprofileupdateBody">
                                <a href="#">Add College</a>
                            </td>

                        </tr>
                        <tr>
                            <td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
                        </tr>
                        <tr>
                            <td class="studentprofileupdateHead" >
                            </td>
                            <td class="studentprofileupdateBody">
                                <input type="submit" id="saveStudentEducationInfo" name="saveStudentEducationInfo" title="Save Education Info" value="Save Details" />

                                <input type="submit" id="cancelStudentEducationInfo" name="cancelStudentEducationInfo" title="Cancel Education Info" value="Cancel" />
                            </td>
                        </tr>
                         <tr>
                            <td colspan="2"><br/><br/></td>
                        </tr>
                    </table>
                </div>
    </td>

    </tr>

    </table>
</form>

I want my code to generate new id for each element to distinctly identify each element by its id.

How can i get id for each element?

解决方案

You are using .clone method, add thats copy everything... You can modify the id where are using that methor, something like this:

$(document).ready(function () {
    $('.studentprofileupdateBody a').click(function () {
        console.log('ok');
        var $tr = $(this).closest('tr').prev();
        var clone = $tr.clone().attr("id","new-id");
        $tr.after(clone);
    });
});

EDIT: To have dynamic id for each row('input' and 'tr'), you can do this:

$(document).ready(function () {
    var dynamicId, inputName, numberEachType;
    $('.studentprofileupdateBody a').click(function () {
        console.log('ok');
        var $tr = $(this).closest('tr').prev();
        numberEachType = $('table#tblEducation tr[name="'+$tr.attr('name')+'"]').length;
        dynamicId = $tr.attr('name') + numberEachType;
        var clone = $tr.clone().attr('id',dynamicId); //dynamic ID at <tr>
        inputName = clone.find('input').attr('name');
        dynamicId = inputName.substring(0,inputName.length-1) + (numberEachType+1);
        clone.find('input').attr('id',dynamicId).attr('name',dynamicId).attr('title',dynamicId.toUpperCase()); //dynamic ID, Name and title at <input>
        $tr.after(clone);
    });
});

Try an example here http://jsfiddle.net/expertCode/NT4Zr/ and see the source code, if it's this what you want.

这篇关于我怎么能得到ID /生成动态生成的元素在HTML使用jQuery的ID？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆