如何使用jQuery更改id或每个字段

时间:2013-03-22 04:11:56

标签: php jquery clone

我希望结果必须像,

<tr class="tr_cond"> 
<td>BLA</td>
<td>BLA</td>
<td>BLA</td>
<td>BLA</td>
<td><input type="button" class="tr_condition" value="+" name="add"></td>
</tr>
<tr class="tr_cond" id="tablCond1"> 
<td id="tablCond1>BLA</td>
<td id="colCond1>BLA</td>
<td id="operCond1>BLA</td>
<td id="valCond1>BLA</td>
<td><input type="button" class="tr_condition" value="+" name="add"></td>
</tr>
<tr class="tr_cond"> 
<td id="tablCond2>BLA</td>
<td id="colCond2>BLA</td>
<td id="operCond2>BLA</td>
<td id="valCond2>BLA</td>
<td><input type="button" class="tr_condition" value="+" name="add"></td>
</tr>
<tr class="tr_cond"> 
<td id="tablCond3>BLA</td>
<td id="colCond3>BLA</td>
<td id="operlCond3>BLA</td>
<td id="valCond3>BLA</td>
<td><input type="button" class="tr_condition" value="+" name="add"></td>
</tr>

jQuery是,

$(".tr_condition").live('click', CloneCondition);
var cloneCount = 1;
function CloneCondition(){
    $(this).closest('.tr_cond')
        .clone()
        .attr('id', 'tablCond'+ cloneCount++)
        .insertAfter(".tr_cond:last"); 
}

正在努力克隆该行,但我想更改该行内的那些字段的id,但这只会更改该行的id。

2 个答案:

答案 0 :(得分:1)

现在试试.....

$(".tr_condition").live('click', CloneCondition);
var cloneCount = 1;
function CloneCondition(){

  $("tr td:nth-child(1)").attr("id","your id");
}

答案 1 :(得分:0)

要添加ID到哪个字段?到input
同时:

对动态添加到文档中的元素使用.on()方法

http://jsbin.com/uharaw/5/edit

$("table").on('click', '.tr_condition', CloneCondition);

var addIDs = ['tabl','col','oper','val'];
var cloneCount = 0;

function CloneCondition(){

    cloneCount++;

    $(this).closest('.tr_cond')
        .clone()
        .insertAfter(".tr_cond:last");

    // after clone is done let's go for the last (new) one
    $('.tr_cond:last td').not(':last').each(function(i){
       $(this).attr('id', addIDs[i] +'Cond'+ cloneCount);
    });

}

经过几次点击后会产生:

<tr class="tr_cond"> 
    <td>BLA</td>
    <td>BLA</td>
    <td>BLA</td>
    <td>BLA</td>
    <td><input name="add" value="+" class="tr_condition" type="button"></td>
</tr>
<tr class="tr_cond"> 
    <td id="tablCond1">BLA</td>
    <td id="colCond1">BLA</td>
    <td id="operCond1">BLA</td>
    <td id="valCond1">BLA</td>
    <td><input name="add" value="+" class="tr_condition" type="button"></td>
</tr>
<tr class="tr_cond"> 
    <td id="tablCond2">BLA</td>
    <td id="colCond2">BLA</td>
    <td id="operCond2">BLA</td>
    <td id="valCond2">BLA</td>
    <td><input name="add" value="+" class="tr_condition" type="button"></td>
</tr>