Форум

jfox · #1 (**permalink**) 16.04.2018, 19:23

Доброго времени.
Требуется помощь в дополнении скрипта. Внизу есть таблица с товарами, напротив каждого товара есть чекбокс. Задача в том, чтобы выделить определенные чекбоксы, в зависимости от артикула.

<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();

j0hnik · #2 (**permalink**) 16.04.2018, 19:31

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 · #3 (**permalink**) 16.04.2018, 19:50

Ого, благодарю, сейчас буду разбираться.

рони · #4 (**permalink**) 16.04.2018, 19:56

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>

Javany11 · #5 (**permalink**) 16.04.2018, 22:26

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();

Я конечно сам еще новичок, и возможно не совсем по теме, но мне кажется что если Вы оставляете за пользователем право вводить артикулы, то в результате в своём массиве можете получить кашу. Проверку данных нужно делать.

jfox · #6 (**permalink**) 18.04.2018, 21:14

Сообщение от Javany11

Я конечно сам еще новичок, и возможно не совсем по теме, но мне кажется что если Вы оставляете за пользователем право вводить артикулы, то в результате в своём массиве можете получить кашу. Проверку данных нужно делать.

А в чем собственно может быть каша?

Javany11 · #7 (**permalink**) 18.04.2018, 22:59

Сообщение от jfox

А в чем собственно может быть каша?

Например если пьяный пользователь введет 12мм2и14..2.2., и Вы это в массиве получите, Вы это сможете дальше обработать своим скриптом? Думаю без проверки нет. Как минимум нужно сказать пользователю о том что ввод некорректный.

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}	
}

Не буду утверждать что это хорошая проверка, но она работает. Отбрасывает буквы и пробелы между запятыми, что позволяет не создавать пустой массив.

рони · #8 (**permalink**) 18.04.2018, 23:07

Сообщение от Javany11

arr[i]

это что?

Javany11 · #9 (**permalink**) 18.04.2018, 23:58

Сообщение от рони

это что?

!isNaN(arr[i]) Это лишнее, случайно попало.

jfox · #10 (**permalink**) 19.04.2018, 12:09

Сообщение от Javany11

Например если пьяный пользователь введет 12мм2и14..2.2., и Вы это в массиве получите, Вы это сможете дальше обработать своим скриптом? Думаю без проверки нет. Как минимум нужно сказать пользователю о том что ввод некорректный.

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}	
}

Не буду утверждать что это хорошая проверка, но она работает. Отбрасывает буквы и пробелы между запятыми, что позволяет не создавать пустой массив.

А, вы про это. Скрипт лично для меня писался, для работы с админкой одной из CMS

Но вообще я сижу думаю еще, как сделать вывод в консоль тех артикулов, которые он не отметил, плюс сколько количество отмеченных чекбоксов.

Форум

Справочник

Discord чат

Курсы javascript