Jquery在表行克隆后的Change上动态更改文本框值

时间:2011-09-29 08:50:42

标签: php javascript jquery html

我有一种复杂的php,html脚本,我用它来创建一个交互式设计。我正在使用重复表,我基本上克隆特定表行的内容并将其附加到表的末尾。当我在选择菜单中选择某个选项时,相应的文本字段会使用正确的值进行更新。但克隆的行行为不正常

我要问的是,是否有办法让这些字段也改变值。这是各种代码 用于添加/克隆行的代码。请注意,ID详细信息是表格行的ID

$("#addrow1").click(function(){
        //alert("It works");

        //$('#description tr:last').after('<tr>...</tr>');
        $('#details').clone().appendTo('#dailyexpense');    


            });

更改文本字段和文本框值的代码

$("#cities").live('change',function(){
var cityrates = $("#cities :selected").val();
var brkfstrates = (0.2 * cityrates).toFixed(1); 
$("#brkfasttxt").val(brkfstrates);
$("#brkfastchk").val(brkfstrates);
var lunchrates = (0.3 * cityrates).toFixed(1);
$("#lunchtxt").val(lunchrates);
$("#lunchchk").val(lunchrates);
var dinnerrates = (0.3 * cityrates).toFixed(1);
$("#dinnertxt").val(dinnerrates);
$("#dinnerchk").val(dinnerrates);
var incdntlrates = (0.2 * cityrates).toFixed(1);
$("#incidentltxt").val(incdntlrates);
$("#incidentlchk").val(incdntlrates);
});

我的表格行代码,由浏览器加载

<tr id="details">
      <td><label for="date"></label>
      <input style="background-color:#CCC;" type="text" name="date" id="date" /></td>
      <td><label for="cities"></label>
        <select name="cities" id="cities" style="background-color:#CCC; width:220px;">
        <?php           
 foreach($country as $makassi1){
 $selectcities = "SELECT City, Country, Rate FROM perdiem_rates WHERE Country =   '$makassi1'";
 $checkcity = mysql_query($selectcities)or die(mysql_error());
 $countcities = mysql_num_rows($checkcity);

 while($row=mysql_fetch_assoc($checkcity))
 {

     $countries = ($row['Country']);
     $names =($row['City']) ;
     $rate =($row['Rate']) ;
     $ratess=$countries."-".$names
     ?> 

 <option id="cityoptrates"  value="<?php echo $rate; ?>"> 
 <?php echo $ratess; ?>
 </option>
 <?php       
 }
 }          
         ?>
      </select></td>
      <td><input name="brkfastchk" type="checkbox" class="chkbox"  id="brkfastchk" />
        <label for="brkfasttxt"></label>
        <input style="background-color:#CCC;" name="brkfasttxt" type="text" id="brkfasttxt" size="5" readonly="readonly" />
      <label for="brkfastchk"></label></td>
      <td><input type="checkbox" name="lunchchk"  id="lunchchk" class="chkbox" />
        <label for="lunchtxt"></label>
        <input style="background-color:#CCC;" name="lunchtxt" type="text" id="lunchtxt" size="5" readonly="readonly" />
      <label for="lunchchk"></label></td>
      <td><input type="checkbox" name="dinnerchk"  id="dinnerchk" class="chkbox" />
        <label for="dinnertxt"></label>
        <input style="background-color:#CCC;" name="dinnertxt" type="text" id="dinnertxt" size="5" readonly="readonly" />
      <label for="dinnerchk"></label></td>
      <td><input type="checkbox" name="incidentlchk"  id="incidentlchk" class="chkbox" />
        <label for="incidentltxt"></label>
        <input style="background-color:#CCC;" name="incidentltxt" type="text" id="incidentltxt" size="5" readonly="readonly" />
      <label for="incdntchk"></label></td>
      <td colspan="2"><label for="daily_totals"></label>
      <input style="background-color:#CCC;" name="daily_totals" type="text" id="daily_totals" size="5" /></td>
    </tr>

根据以上所述,我的文本字段值更改代码与第一个初始行完美匹配。克隆的行不起作用。唯一适用于克隆行的是用于选择城市的选择菜单。需要帮助。接受建议和改进。

链接到jsfiddle http://jsfiddle.net/NAafu/10/

中的实际代码

1 个答案:

答案 0 :(得分:1)