2014-11-23 28 views
1

我想在用戶更改class =「entryprice_class」的任何輸入時獲取當前行的滑動條值。如何獲取表中下一列的滑動條值

在代碼中註釋掉了一些我嘗試過的東西。

我一直在這個小時。仍然沒有運氣。

我哪裏錯了?

<head> 
    <meta charset="utf-8"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css"/> 
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script> 

<body> 
<div data-role="page"> 
    <div data-role="content"> 

     <!-- entry points table --> 
     <section id="entry_points_section"> 
      <div class="input_fields_wrap"> 
       <table class="responsive" id="input_entries_table"> 
        <tbody> 
        <tr> 
         <th scope="col" id="entry_price_column">Entry price</th> 
         <th scope="col">Percent</th> 
         <th scope="col">Order amount</th> 
         <th scope="col">Capital value</th> 
         <th scope="col">Breakeven</th> 
         <th scope="col"></th> 
        </tr> 
        <tr> 
         <td width="17%" style="min-width:3em"><input type="number" class="entryprice_class" 
                    id="entryprice_1" size="5" min="0" placeholder="0" 
                    value="0"></td> 
         <td style="min-width:2em"><input type="range" name="slider-fill_1" class="entry_percent" 
                 id="entry_percent_1" value="50" placeholder="50%" min="0" 
                 max="100" 
                 data-highlight="true"/></td> 
         <td width="17%" style="min-width:3em"><input type="text" class="order_amount" 
                    name="order_amount" size="5" min="0" 
                    placeholder="0" length="10px" disabled></td> 
         <td width="17%" style="min-width:3em"><input type="text" class="capital_value" 
                    name="capital_value" size="5" min="0" 
                    placeholder="0" disabled></td> 
         <td width="17%" style="min-width:3em"><input type="text" class="breakeven" name="breakeven" 
                    size="5" min="0" placeholder="0" disabled></td> 
         <td width="28px" style="display:none"> 
          <button data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true"> 
           &nbsp;</button> 
         </td> 
        </tr> 
        <tr> 
         <td width="17%" style="min-width:3em"><input type="number" class="entryprice_class" 
                    name="entryprice" id="entryprice_2" size="5" 
                    min="0" placeholder="0" value="0"></td> 
         <td style="min-width:2em"><input type="range" name="slider-fill" id="entry_percent_2" value="50" 
                 placeholder="50%" min="0" max="100" 
                 data-highlight="true"/></td> 
         <td width="17%" style="min-width:3em"><input type="text" class="order_amount" 
                    name="order_amount" size="5" min="0" 
                    placeholder="0" length="10px" disabled></td> 
         <td width="17%" style="min-width:3em"><input type="text" class="capital_value" 
                    name="capital_value" size="5" min="0" 
                    placeholder="0" disabled></td> 
         <td width="17%" style="min-width:3em"><input type="text" class="breakeven" name="breakeven" 
                    size="5" min="0" placeholder="0" disabled></td> 
         <td width="28px"><a href="#" class="remove_field"> 
          <button data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true"> 
           &nbsp;</button> 
         </a></td> 
        </tr> 
        </tbody> 
       </table> 
      </div> 
      <div class="ui-grid-solo"> 
       <div class="ui-block-a"> 
        <div> 
         <button id='add_new_entry_button' data-icon="plus" data-inline="false">Add</button> 
        </div> 
       </div> 
      </div> 
     </section> 


    </div></div> 


    <!-- /page --> 

    <script> 

     var entryprice = $('.entryprice_class'); 
     var entryprice_totals = $('#entryprice_totals_1'); 


     entryprice.live('change', function() { 

      entry_price = $(':focus').val(); 

      alert(entry_price); 

      var current_percent = $(this).next('td').next("input").val(); 

      alert(slider_value); 


      //var current_percent = $(this).closest('tr').attr('val'); // table row ID 
      //var current_percent = $(this).closest('tr').where// table row ID 
      // $(this).closest('td').next('td').find('input').show(); 



      //alert($row.val(), row.val()); 

      //var current_percent = $(this).siblings('.entry_percent').val(); 

      //var current_percent = $(this).next('input').val(); 

      // var current_percent = $(this).closest('td').next('td').find('#entry_percent_1'); 

      //var current_percent = $('.entry_percent').val(); 
      //var current_percent = $(this).closest("td").next().find("input").slider("option", "value"); 

      //var current_percent = $(this).next('td').next("input").val(); 

      //var current_percent = $(this).next('.entry_percent').val(); 
      //var current_percent = $(this).next("input[name='slider-fill']").val(); 

      // var current_percent = $(this).closest('input .entry_percent').val(); 

      //var current_percent = $(this).closest("div.options").find("input[name='slider-fill_1']").val(); 

      //var current_percent = $(this).closest('tr').find("input[name='slider-fill_1']").val(); 


      //var current_percent = $(this).parent().next().children('.entry_percent').val(this.value); 

      //var current_percent = $(this).sibling().val(); 


      // var current_percent = $(this).closest("tr").find("input[name='slider-fill']").val(); 

      // current_percent = $(':focus').next('td').find("input[name='slider-fill']").val(); 


      alert(current_percent); 



     }); 




    </script> 

</body> 
</html> 

回答

1

在這裏你去:

var entryprice_totals = $('#entryprice_totals_1'); 


    $('.entryprice_class').on('change', function() { 

     entry_price = $(':focus').val(); 

     alert(entry_price); 

     // this one works with jQuery Mobile 1.2.0 
     var current_percent = $(this).closest("tr").find('td:nth-child(2) input').val(); 

     // var current_percent = $(this).closest("tr").find('input[type="range"]').val(); 

     alert(current_percent); 

    }); 

我用closest方法找到最近的錶行,之後使用了find方法找到輸入類型範圍值。你非常接近找到正確的解決方案。 Fiddle

Updated Fiddle

+0

非常感謝。但有些奇怪的事情正在發生。當我添加對jquerymobile的引用( )時,我得到一個'未定義「的變量值。沒有這個js它有效嗎? – Sage 2014-11-23 15:10:18

+0

@Sage更新了小提琴,使其與jQuery Mobile 1.2.0版一起工作。前一個工作的jQuery Mobile版本1.4.2 – jyrkim 2014-11-23 18:48:40

+0

非常感謝。你不知道這是多麼令人沮喪。 – Sage 2014-11-24 02:12:35

1

您可以使用:

var current_percent = $(this).parent().next("td").find("input[id^='entry_percent']").val(); 

這工作。

+0

和jsfiddle鏈接在這裏:[http://jsfiddle.net/cqpuj0jy/](http://jsfiddle.net/cqpuj0jy/) – caslaner 2014-11-23 15:51:33

1

entry_percent添加到所有滑塊每一行中,像這樣的:

<input type="range" name="slider-fill" id="entry_percent_2" class="entry_percent" value="50" placeholder="50%" min="0" max="100" data-highlight="true"> 

然後用這段JavaScript代碼:

$(function() { 
    $(".entryprice_class").on("change", function() { 
     var val = $(this).closest("tr").find(".entry_percent").val(); 
     alert(val); 
    }); 
}); 

欲瞭解更多信息,請參見以下文檔頁: