Выделение определенного чекбокса через поиск.
Доброго времени.
Требуется помощь в дополнении скрипта. Внизу есть таблица с товарами, напротив каждого товара есть чекбокс. Задача в том, чтобы выделить определенные чекбоксы, в зависимости от артикула.
<table>
<tbody>
<tr>
<th class="min-width"><input type="checkbox" class="s-select-all" data-count="6116"></th>
<th>Код артикула</th>
<th>Название</th>
<th>Цена</th>
<th>В наличии</th>
</tr>
<tr class="product ui-droppable ui-draggable" data-product-id="6636">
<td class="min-width drag-handle"><input type="checkbox"></td>
<td class="s-product-col-sku" title="Код артикула">21400</td>
<td class="drag-handle s-product-name">Велосипед<td>
<td title="Цена">50000</td>
<td title="В наличии">5</td>
</tr>
<tr class="product ui-droppable ui-draggable" data-product-id="6637">
<td class="min-width drag-handle"><input type="checkbox"></td>
<td class="s-product-col-sku" title="Код артикула">21401</td>
<td class="drag-handle s-product-name">Велосипед<td>
<td title="Цена">12000</td>
<td title="В наличии">5</td>
</tr>
<tr class="product ui-droppable ui-draggable" data-product-id="6638">
<td class="min-width drag-handle"><input type="checkbox"></td>
<td class="s-product-col-sku" title="Код артикула">21402</td>
<td class="drag-handle s-product-name">Велосипед<td>
<td title="Цена">60000</td>
<td title="В наличии">5</td>
</tr>
<tr class="product ui-droppable ui-draggable" data-product-id="6639">
<td class="min-width drag-handle"><input type="checkbox"></td>
<td class="s-product-col-sku" title="Код артикула">21403</td>
<td class="drag-handle s-product-name">Велосипед<td>
<td title="Цена">13300</td>
<td title="В наличии">5</td>
</tr>
<tr class="product ui-droppable ui-draggable" data-product-id="6640">
<td class="min-width drag-handle"><input type="checkbox"></td>
<td class="s-product-col-sku" title="Код артикула">21404</td>
<td class="drag-handle s-product-name">Велосипед<td>
<td title="Цена">33200</td>
<td title="В наличии">5</td>
</tr>
<tbody>
</table>
Вот собственно скрипт, который находит определенные артикулы, например, нужны 21401,21403,21404. Скрипт находит их и выделяет желтым цветом. Проблема в том, что я не знаю как зацепиться за определенный чекбокс, чтобы скрипт автоматически отмечал его в зависимости от тех артикулов, которые я введу. Чекбоксы попросту пустые и не содержат в себе какого-либо значения типа айдишка товара.
var count = prompt("Введите артикулы через запятую:");
var array = count.split(',');
function searchText() {
for (var i = 0; i < array.length; i++) {
var result = $("td:contains(" + array[i] + ")")
.css("background-color", "yellow");
}
return result;
}
searchText();
|
var count = prompt("Введите артикулы через запятую:");
var array = count.split(',');
function searchText() {
for (var i = 0; i < array.length; i++) {
var result = $("td:contains(" + array[i] + ")")
.css("background-color", "yellow")
.prev().children('input[type="checkbox"]').prop('checked', true);
}
return result;
}
searchText();
|
Ого, благодарю, сейчас буду разбираться.
|
jfox,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.yellow {
background-color: #FFFF00;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th class="min-width"><input type="checkbox" class="s-select-all" data-count="6116"></th>
<th>Код артикула</th>
<th>Название</th>
<th>Цена</th>
<th>В наличии</th>
</tr>
<tr class="product ui-droppable ui-draggable" data-product-id="6636">
<td class="min-width drag-handle"><input type="checkbox"></td>
<td class="s-product-col-sku" title="Код артикула">21400</td>
<td class="drag-handle s-product-name">Велосипед</td>
<td title="Цена">50000</td>
<td title="В наличии">5</td>
</tr>
<tr class="product ui-droppable ui-draggable" data-product-id="6637">
<td class="min-width drag-handle"><input type="checkbox"></td>
<td class="s-product-col-sku" title="Код артикула">21401</td>
<td class="drag-handle s-product-name">Велосипед</td>
<td title="Цена">12000</td>
<td title="В наличии">5</td>
</tr>
<tr class="product ui-droppable ui-draggable" data-product-id="6638">
<td class="min-width drag-handle"><input type="checkbox"></td>
<td class="s-product-col-sku" title="Код артикула">21402</td>
<td class="drag-handle s-product-name">Велосипед</td>
<td title="Цена">60000</td>
<td title="В наличии">5</td>
</tr>
<tr class="product ui-droppable ui-draggable" data-product-id="6639">
<td class="min-width drag-handle"><input type="checkbox"></td>
<td class="s-product-col-sku" title="Код артикула">21403</td>
<td class="drag-handle s-product-name">Велосипед</td>
<td title="Цена">13300</td>
<td title="В наличии">5</td>
</tr>
<tr class="product ui-droppable ui-draggable" data-product-id="6640">
<td class="min-width drag-handle"><input type="checkbox"></td>
<td class="s-product-col-sku" title="Код артикула">21404</td>
<td class="drag-handle s-product-name">Велосипед</td>
<td title="Цена">33200</td>
<td title="В наличии">5</td>
</tr>
</tbody>
</table>
<script>
var a = ["21401","21403","21404"], num = 0, b = [];
[].forEach.call(document.querySelectorAll('.product'), function(tr) {
var td = tr.querySelector('.s-product-col-sku');
var kod = td.textContent.trim();
var checked = ~a.indexOf(kod);
checked ? num++ : b.push(kod);
tr.querySelector('input').checked = checked;
td.classList[checked ? 'add' : 'remove']("yellow")
});
console.log(num, b)
</script>
</body>
</html>
|
var count = prompt("Введите артикулы через запятую:");
var array = count.split(',');
function searchText() {
for (var i = 0; i < array.length; i++) {
var result = $("td:contains(" + array[i] + ")")
.css("background-color", "yellow");
}
return result;
}
searchText();
Я конечно сам еще новичок, и возможно не совсем по теме, но мне кажется что если Вы оставляете за пользователем право вводить артикулы, то в результате в своём массиве можете получить кашу. Проверку данных нужно делать. |
Цитата:
|
Цитата:
while(true){var UserDigit = prompt("Введите несколько числовых значений, разделенных запятыми:", "2,2,5,5,3,7")
var arr = UserDigit.split(",")
var arr2 = arr.includes("")
var test = arr.join('')
if (isNaN(test)||!isNaN(arr[i])||arr2!=false){alert('Некорректный ввод...','')}
else if(!isNaN(test)){break}
}
Не буду утверждать что это хорошая проверка, но она работает. Отбрасывает буквы и пробелы между запятыми, что позволяет не создавать пустой массив. |
Цитата:
|
Цитата:
|
Цитата:
Но вообще я сижу думаю еще, как сделать вывод в консоль тех артикулов, которые он не отметил, плюс сколько количество отмеченных чекбоксов. |
| Часовой пояс GMT +3, время: 21:55. |