如何获取表中下一列的滑块值
How To Get Slider Value of Next Column In Table
当用户更改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">
</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">
</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>
你来了：
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 方法查找输入类型范围值。您非常接近找到正确的解决方案。小提琴
更新的小提琴
你可以使用它：
var current_percent = $(this).parent().next("td").find("input[id^='entry_percent']").val();
这行得通。
将
类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);
});
});
有关详细信息，请参阅以下文档页面：
- https://api.jquery.com/closest/
- https://api.jquery.com/find/
相关文章：
- 从单击的行上的列中获取数据
- 柱状图后面的一列
- 数据表通过分析一列的值对其进行排序
- Datatables-如何在未显示所有列的情况下禁用表中最后一列的排序
- 获取表中每行的一列的内容，然后循环访问每个内容
- 对象数组-与其他列数据相比，增加一列
- 在最初的查询/表格绘制中只提取谷歌电子表格的一列
- jQuery Datatables:单击一列时对另一列进行排序
- 我的砖石图像只显示在一列中
- 如何使用Jquery一步一步地获取PHP数据
- 删除“;使用javascript从pentaho中的一列中选择“[”
- 使用 Javascript 在一列中更改属性内容
- jquery插件 - 已选择 - 多项选择不在一行中列出，而是列在一列中
- 单击包含按钮的最后一列时获取表的第一列值
- 排除行选择中的最后一列
- 从DB逗号分隔的列中获取所有值，并将其放入文本字段中
- 如何获取表中下一列的滑块值
- 如何获取一列中有多少单元格具有数据的值
- 可手持-通过ajax获取数据，并在一列上设置自动完成
- 通过jQuery获取引导行中的最后一列
