设置动态添加的文本框值在Jquery中具有display:none属性

时间:2013-12-19 13:03:24

标签: javascript jquery html

此处的情况是我已将dynamic row添加到包含tds为textboxspan标记的表格中,

现在我在演示中做一些计算,你会看到一个多因素文本框,在更改时会将我的表更新到最后一列,即(提供的计算区域),

我遇到的问题是我需要获取最后一列(四轮车)的更新计算值,我能够更新跨度但不能更新文本框

JSFIDDLE DEMO

JS代码:

$("#apnd_tr").on('click',function(){
$(".Total_result").parents('tr').before(row_1cnt);
    $(".Total_result").parents('tr').before(row_2cnt);
});



var arrParkingRowIds = new Array();
        $("#myMultipleFactor").on('input', function () {

            var get_factorValue = $(this).val();
            var counter = 0;
            $("#myTable [class*=id_]").each(function () {
                counter++;
                if (counter == 4) {
                    var da = $(this).attr('class');
                    var fourWhlrValue = $("." + da).find("#txtprovidedNoParfetch").val();
                    var setResultProvidedParking = Number(fourWhlrValue) * Number(get_factorValue);
                    $("." + da).find("#txtprovidedPAfetch").next().html(setResultProvidedParking.toFixed(2));
                    $("." + da).find("#txtprovidedPAfetch").val(setResultProvidedParking);
                    counter = 0;
                    arrParkingRowIds.push(da);
                }
            });
        });

        $("#mValue").on('click', function () {
            for (var i = 0; i < arrParkingRowIds.length; i++) {
                var gData = arrParkingRowIds[i];
                alert($("." + gData).find('td:eq(7)').html());
            }
        });



var row_1cnt='<tr class="id_108">   <td colspan="8">       <input type="text" value="2323232323" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="TextTitleFetch" class="prk_txt_style" /><span class="spnrowset">Row Bunglows</span>       <div class="save_prk_row btn btn-mini btn-primary myBTNTEST" id="id_108" style="display: none;">save</div>    </td>  </tr>   <tr class="id_108">    <td id="tdSrNofetch">1</td>    <td id="tdtypeOfParkingfetch">Four wheeler</td>  <td>      <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredPRFetch" /><span class="spnrowset">3</span>        </td>  <td>            <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedPRfetch"><span class="spnrowset">3</span>     </td>      <td>     <input type="text" value="3" class="prk_txt_style clsCal1_108" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredNoParfetch"><span class="spnrowset">3</span>    </td>     <td>            <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedNoParfetch"><span class="spnrowset">3</span>     </td>   <td>     <input type="text" disabled="" value="9" class="prk_txt_style clsShow1_108" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredPAfetch"><span class="spnrowset">9</span>     </td>  <td>    <input type="text" value="9" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedPAfetch"><span class="spnrowset spnadd">9</span>   </td> </tr> <tr class="id_108">   <td>2</td>   <td>Two wheeler</td>    <td>       <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredPR2fetch"><span class="spnrowset">3</span> </td>   <td>         <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedPR2fetch"><span class="spnrowset">3</span>  </td>   <td>   <input type="text" value="3" class="prk_txt_style clsCal2_108" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredNoPar2fetch"><span class="spnrowset">3</span> </td>   <td>  <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedNoPar2fetch"><span class="spnrowset">3</span>  </td>  <td>    <input type="text" disabled="" value="9" class="prk_txt_style clsShow2_108" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredPA2fetch"><span class="spnrowset">9</span> </td> <td>  <input type="text" value="9.00" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedPA2fetch"><span class="spnrowset spnadd">9.00</span> </td></tr> <tr class="id_108">    <td>3</td>    <td>bicycle</td>    <td>  <input type="text" value="3" style="margin-bottom: 0px; width: 80% ! important; display: none;" class="prk_txt_style" id="txtrequiredPR3fetch"><span class="spnrowset">3</span> </td>  <td><input type="text" value="3" style="width: 105px; margin-left: 0px; display: none;" class="prk_txt_style" id="txtprovidedPR3fetch"><span class="spnrowset">3</span> </td>  <td>  <input type="text" value="3" style="width: 105px; margin-left: 0px; display: none;" class="prk_txt_style clsCal3_108" id="txtrequiredNP3fetch"><span class="spnrowset">3</span>  </td>    <td>        <input type="text" value="3" style="width: 105px; margin-left: 0px; display: none;" class="prk_txt_style" id="txtprovidedNP3fetch"><span class="spnrowset">3</span>     </td>   <td>      <input type="text" disabled="" value="0" style="width: 105px; margin-left: 0px; display: none;" id="txtrequiredPA3fetch" class="prk_txt_style clsShow3_108"><span class="spnrowset">0</span>   </td>     <td>          <input type="text" value="0.00" style="width: 105px; margin-left: 0px; display: none;" class="prk_txt_style" id="txtprovidedPA3fetch"><span class="spnrowset spnadd">0.00</span>  </td> </tr>';


var row_2cnt=' <tr class="id_109">   <td colspan="8"> <input type="text" value="2323232323" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="TextTitleFetch" class="prk_txt_style" /><span class="spnrowset">Hospital</span>  <div class="save_prk_row btn btn-mini btn-primary myBTNTEST" id="id_108" style="display: none;">save</div>  </td>  </tr>   <tr class="id_109">  <td id="tdSrNofetch">1</td>        <td id="tdtypeOfParkingfetch">Four wheeler</td>        <td>  <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredPRFetch" /><span class="spnrowset">3</span> </td>  <td>   <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedPRfetch"><span class="spnrowset">3</span>    </td>       <td>         <input type="text" value="5" class="prk_txt_style clsCal1_108" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredNoParfetch"><span class="spnrowset">5</span>  </td>    <td>   <input type="text" value="5" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedNoParfetch"><span class="spnrowset">5</span> </td> <td>  <input type="text" disabled="" value="15" class="prk_txt_style clsShow1_108" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredPAfetch"><span class="spnrowset">15</span>  </td>   <td>  <input type="text" value="15" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedPAfetch"><span class="spnrowset spnadd">15</span>     </td>   </tr>    <tr class="id_109">  <td>2</td> <td>Two wheeler</td>  <td> <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredPR2fetch"><span class="spnrowset">3</span>  </td>  <td>    <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedPR2fetch"><span class="spnrowset">3</span>    </td> <td>  <input type="text" value="3" class="prk_txt_style clsCal2_108" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredNoPar2fetch"><span class="spnrowset">3</span> </td> <td> <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedNoPar2fetch"><span class="spnrowset">3</span> </td>  <td>    <input type="text" disabled="" value="9" class="prk_txt_style clsShow2_108" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredPA2fetch"><span class="spnrowset">9</span> </td>  <td>   <input type="text" value="9.00" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedPA2fetch"><span class="spnrowset spnadd">9.00</span>  </td></tr> <tr class="id_109"> <td>3</td>  <td>bicycle</td><td>    <input type="text" value="3" style="margin-bottom: 0px; width: 80% ! important; display: none;" class="prk_txt_style" id="txtrequiredPR3fetch"><span class="spnrowset">3</span>  </td> <td> <input type="text" value="3" style="width: 105px; margin-left: 0px; display: none;" class="prk_txt_style" id="txtprovidedPR3fetch"><span class="spnrowset">3</span>    </td><td> <input type="text" value="3" style="width: 105px; margin-left: 0px; display: none;" class="prk_txt_style clsCal3_108" id="txtrequiredNP3fetch"><span class="spnrowset">3</span> </td> <td>  <input type="text" value="3" style="width: 105px; margin-left: 0px; display: none;" class="prk_txt_style" id="txtprovidedNP3fetch"><span class="spnrowset">3</span>  </td>  <td> <input type="text" disabled="" value="0" style="width: 105px; margin-left: 0px; display: none;" id="txtrequiredPA3fetch" class="prk_txt_style clsShow3_108"><span class="spnrowset">0</span>  </td>  td>   <input type="text" value="0.00" style="width: 105px; margin-left: 0px; display: none;" class="prk_txt_style" id="txtprovidedPA3fetch"><span class="spnrowset spnadd">0.00</span> </td></tr>';

HTML标记:

multiple Factor
<input type="text" value="3" tabindex="1" id="myMultipleFactor" />

<br><br>
<div id="apnd_tr" class="btnStyle">Append TR</div><br>
    <div id="mValue" class="btnStyle">Calculate Value</div>
<br>
<table border="1" id="myTable">
    <tr>
        <th width="5%" rowspan="2">Sr. No.</th>
        <th width="20%" rowspan="2">Type of Parking</th>
        <th width="25%" colspan="2">Parking ratio</th>
        <th width="25%" colspan="2">No. of Parking</th>
        <th width="25%" colspan="2">Calculated Done</th>
    </tr>
    <tr>
        <th width="12.5%">Required</th>
        <th width="12.5%">Provided</th>
        <th width="12.5%">Required</th>
        <th width="12.5%">Provided</th>
        <th width="12.5%">Required</th>
        <th width="12.5%">Provided</th>
    </tr>
    <tr > <td class="Total_result" colspan="8">Total</td></tr>
    </table>

1 个答案:

答案 0 :(得分:1)

在一些R&amp; d之后我发现了导致问题的原因..它的文本输入html是display:none和一些禁用的地方,它没有得到更新或者不能保持可编辑(可能是jquery bug)。

关于此问题的相关主题 - - stackoverflow.com/questions/3537326/…

Fiddle demo

有两种方法可以解决它..

  • 快速简便的解决方法是使用element.attr("value" , "yourvalue")而不是element.val()

  • 将类型文本更改为隐藏的替代修复方法(所有方法仅将其设置为例如。)

 <input type="text" value="2323232323" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="TextTitleFetch" class="prk_txt_style" />

<input type="hidden" value="2323232323" tabindex="1"  id="TextTitleFetch" class="prk_txt_style" />

据我所知,这些输入主要用于表单数据或内部使用,因此您可以将它们保留为隐藏类型。

更新了输入demo