jquery复制下拉框，并每次复制的下拉框的id值不一样

我想点按钮实现复制下拉框，复制代码如下，想动态改变下拉框的ID如何来做

<input name="button" type="button" id="BtAdd" value="添加教材" />
<input name="button" type="button" id="BtDel" value="删除教材" /
<table>
<tr>
<td height="30"  align="center">&nbsp;</td>
<td height="30" colspan="7"  align="left"><table width="542" border="0" cellpadding="0" cellspacing="0" id="tb" style="border:0px solid #000;">
      <tr>
      <td width="40" height="30" >序号</td>
      <td width="39" align="center" ><input id="CKA" name="CKA" type="checkbox"/></td>
      <td width="172" align="center" >教材名</td>
     <td width="153" align="center" > 教材实收</td>
     <td width="121" align="center" > 教材已领</td>
       </tr>
       <tr>
    <td height="30" style="text-align: center">1</td>
    <td style="text-align: center"><input id="CK" type="checkbox" name="CK"/></td>
    <td style="text-align: center">
<select id="student_jcy"  name="param.student_jcy" style="width:150px" onChange="findBookMoneyList(this,'student_jce');" >
          <option value="">请选择</option>
       </select></td>
     <td style="text-align: center"><input  type="text" name="param.student_jce" id="student_jce" maxlength="40" style="width:100px" class="input_txt" onkeypress='return isNUM(event);' readonly="readonly"></td>
        <td style="text-align: center">
       <select name="param.student_jcysfly" id="student_jcysfly">
        <option value="0">未领</option>
       <option value="1">已领</option>
        </select>
      </td>
      </tr>
  <tr><td></td><td class="SoftType"></td><td></td><td></td><td></td></tr>
 </table>

  <script type="text/javascript">
        $(document).ready(function() {
            var i = 1;
            $("#BtAdd").click(function() {
　　　　　//复制一行
              var tr = $("#tb tr").eq(1).clone();
              tr.find("td").get(0).innerHTML = ++i;          
              tr.show();
              tr.appendTo("#tb");
            });
            $("#BtDel").click(function() {
                $("#tb tr:gt(1)").each(function() {
                    if ($(this).find("#CK").get(0).checked == true) {
                        $(this).remove();
                    }
                });
                i = 1;
                $("#tb tr:gt(1)").each(function() {
                    $(this).find("td").get(0).innerHTML = ++i;
                });
                $("#CKA").attr("checked", false);
            });
            $("#CKA").click(function() {
                $("#tb tr:gt(1)").each(function() {
                    $(this).find("#CK").get(0).checked = $("#CKA").get(0).checked;
                });
            });
        });
</script>

15 个解决方案

#1

 <script type="text/javascript">
  $(document).ready(function() {
  var i = 1;
  $("#BtAdd").click(function() {
　　　　　//复制一行
  var tr = $("#tb tr").eq(1).clone();
  tr.find("td").get(0).innerHTML = ++i;   
  tr.show();
  tr.appendTo("#tb");
  });
  $("#BtDel").click(function() {
  $("#tb tr:gt(1)").each(function() {
  if ($(this).find("#CK").get(0).checked == true) {
  $(this).remove();
  }
  });
  i = 1;
  $("#tb tr:gt(1)").each(function() {
  $(this).find("td").get(0).innerHTML = ++i;
  });
  $("#CKA").attr("checked", false);
  });
  $("#CKA").click(function() {
  $("#tb tr:gt(1)").each(function() {
  $(this).find("#CK").get(0).checked = $("#CKA").get(0).checked;
  });
  });
  });
</script>

#2

复制
<select id="student_jcy"  name="param.student_jcy" style="width:150px" onChange="findBookMoneyList(this,'student_jce');" >
          <option value="">请选择</option>
       </select></如何每复制一个行id值最后自动加1 id="student_jcy1"  id="student_jcy2"  id="student_jcy2" ......

#3

而下拉框<select id="student_jcy">的值是根据另外一个框选择值动态出来的，每次都不一样

#4

clone() 之后 你可以通过find()找到 select 再通过attr("id",student_jcy+i+);
改变它的id 。

#5

引用 4 楼 zell419 的回复:

clone() 之后 你可以通过find()找到 select 再通过attr("id",student_jcy+i+);
改变它的id 。

能不能把   你可以通过find()找到 select 再通过attr("id",student_jcy+i+);
写一个完整代码，不会用这个

先谢过了

#6

var tr = $("#tb tr").eq(1).clone();
  i = i+1;
  tr.find("td").eq(0).html(i);
//  tr.show();
  tr.find("select").eq(0).attr("id","student_jcy"+i);//改变id
  tr.find("select").eq(1).attr("id","student_jcysfly"+i);
  tr.find(":text:first").attr("id","CKA"+i);
  tr.appendTo("#tb");

#7

楼上的够简洁，学习了

#8

引用 6 楼 zell419 的回复:

HTML code


var tr = $("#tb tr").eq(1).clone();
  i = i+1;
  tr.find("td").eq(0).html(i);
//  tr.show();
  tr.find("select").eq(0).attr("id","student_jcy"+i);//改变id
  tr.find("select").eq(1).a……

<input  type="text" name="param.student_jce" id="student_jce" >

这个是这样加吗?
tr.find("text").eq(2).attr("id","student_jce"+i);//改变id

另外如何把这一行的JS输出来，看现结果对不对

#9

引用 8 楼 xwt799023 的回复:

引用 6 楼 zell419 的回复:
HTML code


var tr = $("#tb tr").eq(1).clone();
i = i+1;
tr.find("td").eq(0).html(i);
//  tr.show();
tr.find("select").eq(0).attr("id","student_jcy"+i);//改变id
tr.find("se……

alert($("body:first").html());
看下 。

#10

哈，没有gun动条，看不到，JS太多了

#11

var tr = $("#tb tr").eq(1).clone();
  i = i+1;
  tr.find("td").eq(0).html(i);
//  tr.show();
  tr.find("select").eq(0).attr("id","student_jcy"+i);//改变id
  tr.find("select").eq(1).attr("id","student_jcysfly"+i);
  tr.find(":text:first").attr("id","CKA"+i);
  tr.appendTo("#tb");

1、能不能把
 tr.find("select").eq(0).attr("id","student_jcy"+i);//改变id
  tr.find("select").eq(1).attr("id","student_jcysfly"+i);
输出来，看看id对不对
2、对于文框的，是不是
tr.find("text").eq(2).attr("id","student_jce"+i);//改变id

为啥有的还要写成 tr.find(":text:first").attr("id","CKA"+i);这样呢

#12

2、对于文框的，是不是
tr.find("text").eq(2).attr("id","student_jce"+i);//改变id

为啥有的还要写成 tr.find(":text:first").attr("id","CKA"+i);这样呢

-------------
主要是text 与  :text  有啥区别

#13

引用 12 楼 xwt799023 的回复:

2、对于文框的，是不是
tr.find("text").eq(2).attr("id","student_jce"+i);//改变id

为啥有的还要写成 tr.find(":text:first").attr("id","CKA"+i);这样呢

-------------
主要是text 与  :text  有啥区别

student_jce  不是select吗?
:first 是第一个的意思 。

#14

我那还有一个文本框呢，有两个下拉框，一个文本框

#15

取第一个文本框tr.find(":text:first").attr("id","CKA"+i);
如果有多个文本框怎么写?