Выделение определенного чекбокса через поиск.
Доброго времени.
Требуется помощь в дополнении скрипта. Внизу есть таблица с товарами, напротив каждого товара есть чекбокс. Задача в том, чтобы выделить определенные чекбоксы, в зависимости от артикула.
<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}
}
Не буду утверждать что это хорошая проверка, но она работает. Отбрасывает буквы и пробелы между запятыми, что позволяет не создавать пустой массив. |
Цитата:
|
Цитата:
|
Цитата:
Но вообще я сижу думаю еще, как сделать вывод в консоль тех артикулов, которые он не отметил, плюс сколько количество отмеченных чекбоксов. |
Цитата:
|
jfox,
а к чему эти мытарства, почему не сделать артикул и флажок единым целым? Какой смысл прятать флажок и упорно решать проблемы? |
Цитата:
|
Цитата:
<td class="min-width drag-handle"><input id="6636" type="checkbox"></td> <td class="s-product-col-sku" title="Код артикула"><label for="6636">21400</label></td> а класс просто переключать toggle? |
Цитата:
|
Цитата:
Цитата:
|
Цитата:
|
Цитата:
Цитата:
Не оказаться их может, потому что в одном товаре может находится два артикула, но отображается только первый из них. Например Велосипед 1 имеет артикулы 20400(красный цвет) и 20452(синий цвет). Я добавляю в prompt два этих артикула, но чекбоксом он отметит мне только 20400, а 20452 он(скрипт) пропустит, потому что не сможет найти. И вот скрипт в логах должен мне указать, что артикул с номером 20452 не отметился. Только вот таких артикулов бывает много. Забегу вперед и отвечу на вопрос "А зачем тебе отмечать 20452, если он находится внутри товара с 20400 артикулом и уже считается отмеченным?" Ответ: Велосипед 2 имеет первый артикул 0001, а второй 0005. Мне нужен 0005 и я его добавляю в prompt, однако 0001 я не добавляю, потому что я вообще знать не знаю, что 0005 сидит в 0001. Как-то так. |
jfox,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.yellow {
background-color: #FFFF00;
}
.info {
color: #FF0000;
}
</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>
<p class="info"></p>
<script>
var a = ["21401","21403","21404", "20400", "20452"], b = [], err;
[].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 && b.push(kod);
tr.querySelector('input').checked = checked;
td.classList[checked ? 'add' : 'remove']("yellow")
});
err = a.filter(function(e) {
return b.indexOf(e) == -1
})
document.querySelector('p.info').innerHTML = err
</script>
</body>
</html>
|
рони, в коде более-менее разобрался и подстроил под себя.
Благодарю за помощь. |
| Часовой пояс GMT +3, время: 00:11. |