Подсчитать в таблице строки с пустым 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, а как-то иначе? Подскажите, пожалуйста. |
Странно, но всё победилось даже без 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);
Может, не элегантно, но - работает :) |
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>
|
Спасибо, рони!
Красиво, и на чистом JS. Так Вы весь JQ отодвинете к рудиментам. Или он уже давно там? :) |
| Часовой пояс GMT +3, время: 07:39. |