将HTML值拉入JavaScript变量 [英] Pull HTML Value into Javascript Variable
问题描述
我有一个多列的表格，其中一列是复选框。无论何时选中该选项，它都会在表格的右侧显示另一个列单元格，并使用向上/向下微调器来设置值。
我遇到的问题是我不能让微调器超过我拥有的数量列中的数字。因此，我需要将相应行中的数量列的当前值拖到JavaScript变量中，并使用我的微调函数。我已经能够使用 getElementById 获取值，但只获得表中的第一个值，并且不能用于表中的任何其他值。我一直在尝试 getElementsByClassName 但没有运气。
我怎么能成功地做到这一点？
PHP / HTML：
< table id =merchTablecellspacing =5 class =sortable>
< thead>
< tr class =ui-widget-header>
< th class =merchRow>报告代码< / th>
< th class =merchRow> SKU< / th>
< th class =merchRow>特殊ID< / th>
< th class =sorttable_nosort> Unit< / th>
< th style =display：none; class =num> Quantity＃< / th>
< / tr>
< / thead>
< tbody>
<？php foreach（$ dbh-> query（$ query）as $ row）{？>
< tr>
< td class =ui-widget-content>< input type =checkboxclass =checkname =check>< / td>
< td class =loc ui-widget-contentid =loc-<？php echo $ row（'row''Loc']）？>><？php echo $ row [ '禄'];？>< / TD>
< td class =rp-code ui-widget-contentalign =centerid =rp-code-<？php echo intval（$ row ['Rp-Code']）？> ;><？php echo $ row ['Rp-Code'];？>< / td>
< td class =sku ui-widget-contentid =sku-<？php echo intval（$ row ['SKU']）？>><？php echo $ row [ 'SKU'];？>< / TD>
< td class =special-id ui-widget-contentalign =centerid =special-id-<？php echo intval（$ row ['Special-ID']）？> ;><？php echo $ row ['Special-ID'];？>< / td>
< td class =description ui-widget-contentid =description-<？php echo intval（$ row ['Description']）？>><？php echo $ row [ '描述'];？>< / TD>
< td class =quantity ui-widget-contentalign =centerid =quantity-<？php echo intval（$ row ['Quantity']）？>>< ？php echo $ row ['Quantity'];？>< / td>
< td class =unit ui-widget-contentid =unit-<？php echo intval（$ row ['Unit']）？>><？php echo $ row [ '单元'];？>< / TD>
< td style =display：none; class =quantity_num ui-widget-content>< input type =textboxstyle =width：100px; class =spinnername =valueid =test>< / td>
< / tr>
<？php}？>
< / tbody>
< / table>
JavaScript ...我尝试使用数量变量。每次我选择复选框时， console.log（数量）都会返回 undefined ：
$（function（）{
$（。check）。change（function（）{
$（this ）.closest（'tr'）。find（'td.quantity_num'）。toggle（this.checked）;
console.log（$（'input.check'）。is（'：checked'）） ;
var quantity = document.getElementsByClassName（'quantity'）。innerHTML;
console.log（quantity）;
if（$（'input.check'）。is （'：checked'））
$（this）.closest（'table'）。find（'th.num'）。toggle（true）;
else
$（this） .closest（'table'）。find（'th.num'）。toggle（false）;
$（.spinner）.spinner（{ b $ b spin：function（event，ui）{
if（ui.value> quantity）{
$（this）.spinner（value，quantity）;
return false ;
} else if（ui.value< = 0）{
$（this）.spinner（value，0）;
返回false;
}
}
}）;
}）;
}）;
var quantity = $（this）.closest（'tr'）。find（'td.quantity'）。html（）;
建议将该值放入数据属性中：
< td class =quantity ui-widget-contentdata-quantity =<？php echo $ row ['Quantity']？>我们可以通过下面的例子来说明如何使用数据库中的数据：['Quantity'];>><？php echo $ row ['Quantity'];？>< TD>
然后您可以从jQuery访问该值：
var quantity = $（this）.closest（'tr'）。find（'td.quantity'）。data（'quantity'）;
这样您就不依赖于HTML。想象一下，明天，在该单元格中，您希望使用< span> 或将单位添加到数量。如果您的数据位于某个属性中，则不依赖于单元格中的实际内容。
I have a table with multiple columns with one column being a checkbox. Whenever that is checked, it displays another column cell to the right of the table with an up/down spinner to set a value.
The problem I am having is that I cannot have the spinner go past the number that is in the Quantity column that I have. So I need to pull the current value of the Quantity column in the corresponding row into a javascript variable and use that with my spinner function. I have been able to get the value using getElementById but that only gets the first value in the table and does not work for any further values down in the table. I keep trying getElementsByClassName but am having no luck.
How could I do this successfully?
PHP/HTML:
<table id="merchTable" cellspacing="5" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbh->query($query) as $row) {?>
<tr>
<td class="ui-widget-content"><input type="checkbox" class="check" name="check"></td>
<td class="loc ui-widget-content" id="loc-<?php echo intval ($row['Loc'])?>"><?php echo $row['Loc'];?></td>
<td class="rp-code ui-widget-content" align="center" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
<td class="sku ui-widget-content" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
<td class="special-id ui-widget-content" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
<td class="description ui-widget-content" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
<td class="quantity ui-widget-content" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
<td class="unit ui-widget-content" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
<td style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" name="value" id="test"></td>
</tr>
<?php } ?>
</tbody>
</table>
JavaScript...I am trying to pull in the value using the quantity variable. Every time I select a checkbox, the console.log(quantity) comes back with undefined:
$(function () {
$(".check").change(function(){
$(this).closest('tr').find('td.quantity_num').toggle(this.checked);
console.log($('input.check').is(':checked'));
var quantity = document.getElementsByClassName('quantity').innerHTML;
console.log(quantity);
if($('input.check').is(':checked'))
$(this).closest('table').find('th.num').toggle(true);
else
$(this).closest('table').find('th.num').toggle(false);
$( ".spinner" ).spinner({
spin: function( event, ui ) {
if ( ui.value > quantity ) {
$( this ).spinner( "value", quantity );
return false;
} else if ( ui.value <= 0 ) {
$( this ).spinner( "value", 0 );
return false;
}
}
});
});
});
var quantity = $(this).closest('tr').find('td.quantity').html();
It's recommended putting that value in a data property:
<td class="quantity ui-widget-content" data-quantity="<?php echo $row['Quantity'] ?>" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
And then you can access that value from jQuery:
var quantity = $(this).closest('tr').find('td.quantity').data('quantity');
This way you don't depend on HTML. Imagine that tomorrow, in that cell, you want to use a <span> or add units to quantity. If your data is in a property, you don't depend on what is actually inside the cell.
这篇关于将HTML值拉入JavaScript变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
