Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.12.2022, 20:07
Интересующийся
Отправить личное сообщение для Neznajka Посмотреть профиль Найти все сообщения от Neznajka
 
Регистрация: 26.07.2022
Сообщений: 26

Подсчитать в таблице строки с пустым input'ом в определённой колонке
Имеется такая таблица:
<table id="cTabZkp">
	<thead>
		<tr>
			<th>X</th>
			<th>N#</th>
			<th>Product</th>
			<th>Number</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><button>X</button></td>
			<td>1</td>
			<td><input type="text" name="Prd" value="medium MCDB"></td>
			<td><input type="text" name="Nkt" value="20483020"></td>
		</tr>
		<tr>
			<td><button>X</button></td>
			<td>2</td>
			<td><input type="text" name="Prd" value="cell tracker"></td>
			<td><input type="text" name="Nkt" value="D8026"></td>
		</tr>
		<tr>
			<td><button>X</button></td>
			<td>3</td>
			<td><input type="text" name="Prd" value=""></td>
			<td><input type="text" name="Nkt" value=""></td>
		</tr>
		<tr>
			<td><button>X</button></td>
			<td>4</td>
			<td><input type="text" name="Prd" value=""></td>
			<td><input type="text" name="Nkt" value=""></td>
		</tr>
		<tr>
			<td><button>X</button></td>
			<td>5</td>
			<td><input type="text" name="Prd" value=""></td>
			<td><input type="text" name="Nkt" value=""></td>
		</tr>
	</tbody>
</table>

Мне необходимо подсчитать количество строк, имеющих пустые input'ы с аргументом name="Prd" (в приведённом примере их 3).
Я пробовал привести коллекцию строк к массиву и применить reduce:
var myArray = [...$("#cTabZkp tbody tr input[name='Prd']")];
var myCallback = (total, currentValue, currentIndex, arr ) => {
	var cV=arr[currentIndex].find("input[name='Prd']").val();
	var iii=(!cV ? 1 : 0);
    return total + iii;
};
var result = myArray.reduce(myCallback);
console.log('result = ',result);

Не получается и я догадываюсь, почему: элемент массива не является числом. Тогда я попытался привести всё к числам:
var myArray = [...$("#cTabZkp tbody tr input[name='Prd']").val()];
var myCallback = (total, currentValue, currentIndex, arr ) => {
	var iii=(!currentValue ? 1 : 0);
    return total + iii;
};
var result = myArray.reduce(myCallback);
console.log('result = ',result);

- так тоже не выходит, ибо значения НЕ-пустых input'ов тогда раскладываются на символы и "путаются под ногами".
Как бы победить такой подсчёт? Может, не через reduce, а как-то иначе? Подскажите, пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 22.12.2022, 20:24
Интересующийся
Отправить личное сообщение для Neznajka Посмотреть профиль Найти все сообщения от Neznajka
 
Регистрация: 26.07.2022
Сообщений: 26

Странно, но всё победилось даже без reduce:
var aoTmp = $("#cTabZkp tbody tr"), nPust=0;
		aoTmp.each(function(){
			nPust = ($(this).find("input[name='Prd']").val() ? nPust : nPust+1);	
		});
		console.log('nPust = ',nPust);

Может, не элегантно, но - работает
Ответить с цитированием
  #3 (permalink)  
Старый 22.12.2022, 20:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Neznajka,
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let ar = Array.from(document.querySelectorAll("#cTabZkp [name='Prd']"));
            let length = ar.filter(({ value }) => !value).length;
            alert(length);
        })
    </script>
</head>

<body>
    <table id="cTabZkp">
        <thead>
            <tr>
                <th>X</th>
                <th>N#</th>
                <th>Product</th>
                <th>Number</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><button>X</button></td>
                <td>1</td>
                <td><input type="text" name="Prd" value="medium MCDB"></td>
                <td><input type="text" name="Nkt" value="20483020"></td>
            </tr>
            <tr>
                <td><button>X</button></td>
                <td>2</td>
                <td><input type="text" name="Prd" value="cell tracker"></td>
                <td><input type="text" name="Nkt" value="D8026"></td>
            </tr>
            <tr>
                <td><button>X</button></td>
                <td>3</td>
                <td><input type="text" name="Prd" value=""></td>
                <td><input type="text" name="Nkt" value=""></td>
            </tr>
            <tr>
                <td><button>X</button></td>
                <td>4</td>
                <td><input type="text" name="Prd" value=""></td>
                <td><input type="text" name="Nkt" value=""></td>
            </tr>
            <tr>
                <td><button>X</button></td>
                <td>5</td>
                <td><input type="text" name="Prd" value=""></td>
                <td><input type="text" name="Nkt" value=""></td>
            </tr>
        </tbody>
    </table>
</body>

</html>
Ответить с цитированием
  #4 (permalink)  
Старый 22.12.2022, 21:29
Интересующийся
Отправить личное сообщение для Neznajka Посмотреть профиль Найти все сообщения от Neznajka
 
Регистрация: 26.07.2022
Сообщений: 26

Спасибо, рони!
Красиво, и на чистом JS. Так Вы весь JQ отодвинете к рудиментам. Или он уже давно там?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сравнение id строки в таблице и создание класса в єтой же строке alekspvn jQuery 2 31.10.2017 10:59
Считать строки в таблице игнорируя вложенные Гробовщик jQuery 4 17.12.2013 09:49
Добавить/удалить строки в таблице zerojava Элементы интерфейса 4 31.12.2012 16:43
Выделение строки в таблице posta ExtJS 5 23.06.2011 12:31
Отфильтровать строки в таблице по заданным критериям Hag1989 Общие вопросы Javascript 0 03.12.2009 02:06