Узнать Value inputa в таблице.
Добрый вечер, только начал изучать JavaScript поэтому так и не смог разобраться по аналогии с предыдущими примерами как определить Value Input' а, который лежит внутри таблицы. При вхождении в функцию известен номер по каталогу - значение первой ячейки строки.
<table id="result_table" border="1">
<thead>
<tr>
<th>Номер по каталогу</th>
<th>Наименование</th>
<th>Цена</th>
<th>Количесвто</th>
</tr>
</thead>
<tbody>
<tr>
<td>312304-П</td>
<td>Шайба</td>
<td>2000 р.</td>
<td>
<div class="number">
<span class="minus" onclick="decrem('inp4', this);">-</span>
<input type="text" value="1" id="inp4">
<span class="plus" onclick="increm('inp4', this); ">+</span>
</div>
</td>
</tr>
<tr>
<td>236-10020-А5</td>
<td>Блок цилиндров</td>
<td>345 р.</td>
<td>
<div class="number">
<span class="minus" onclick="decrem('inp5', this);">-</span>
<input type="text" value="3" id="inp5"><span class="plus" onclick="increm('inp5', this); ">+</span>
</div>
</td>
</tr>
<tr>
<td>236-1004355181</td>
<td>Шайба</td>
<td>1435 р.</td>
<td>
<div class="number">
<span class="minus" onclick="decrem('inp6', this);">-</span>
<input type="text" value="6" id="inp6">
<span class="plus" onclick="increm('inp6', this); ">+</span>
</div>
</td>
</tr>
</tbody>
</table>
|
plus minus количество товара
ivt22,
непонятно о чём вы ... вариант для плюс/минус
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.minus, .plus{
cursor: pointer;
}
</style>
</head>
<body>
<table id="result_table" border="1">
<thead>
<tr>
<th>Номер по каталогу</th>
<th>Наименование</th>
<th>Цена</th>
<th>Количесвто</th>
</tr>
</thead>
<tbody>
<tr>
<td>312304-П</td>
<td>Шайба</td>
<td>2000 р.</td>
<td>
<div class="number">
<span class="minus" >-</span>
<input type="text" value="1" id="inp4">
<span class="plus" >+</span>
</div>
</td>
</tr>
<tr>
<td>236-10020-А5</td>
<td>Блок цилиндров</td>
<td>345 р.</td>
<td>
<div class="number">
<span class="minus" >-</span>
<input type="text" value="3" id="inp5">
<span class="plus" >+</span>
</div>
</td>
</tr>
<tr>
<td>236-1004355181</td>
<td>Шайба</td>
<td>1435 р.</td>
<td>
<div class="number">
<span class="minus" >-</span>
<input type="text" value="6" id="inp6">
<span class="plus" >+</span>
</div>
</td>
</tr>
</tbody>
</table>
<script>
window.addEventListener("DOMContentLoaded", function() {
var d = document.querySelectorAll(".number");
[].forEach.call(d , function(el) {
el.addEventListener("click", function(c) {
c.preventDefault();
var i = el.querySelector("input");
c = c.target;
if (c.classList.contains("minus")) i.value--;
else if (c.classList.contains("plus")) i.value++;
else return;
0 > +i.value && (i.value = 0);
/* ограничение текущим значеним */
//+i.defaultValue < +i.value && (i.value = i.defaultValue);
},false)
});
});
</script>
</body>
</html>
|
С селектором jQuery можно проще:
<!DOCTYPE html>
<html dir="ltr" lang="ru">
<head>
<meta charset="UTF-8"/>
<title>IiT</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
"use strict";
$(function() {
var N = '236-10020-А5'; // номер по каталогу (Вы сказали, что он заранее известен)
(function getInputByN (N) {
var inputVal = $('tr:has(td:contains(' + N + ')) input').val();
alert("Value Input'а для номера '" + N + "': " + inputVal);
})(N);
});
</script>
</head>
<body>
<table id="result_table" border="1">
<thead>
<tr>
<th>Номер по каталогу</th>
<th>Наименование</th>
<th>Цена</th>
<th>Количесвто</th>
</tr>
</thead>
<tbody>
<tr>
<td>312304-П</td>
<td>Шайба</td>
<td>2000</td>
<td>
<div class="number">
<span class="minus" onclick="decrem('inp4', this);">-</span>
<input type="text" value="1" id="inp4">
<span class="plus" onclick="increm('inp4', this); ">+</span>
</div>
</td>
</tr>
<tr>
<td>236-10020-А5</td>
<td>Блок цилиндров</td>
<td>345 р.</td>
<td>
<div class="number">
<span class="minus" onclick="decrem('inp5', this);">-</span>
<input type="text" value="3" id="inp5"><span class="plus" onclick="increm('inp5', this); ">+</span>
</div>
</td>
</tr>
<tr>
<td>236-1004355181</td>
<td>Шайба</td>
<td>1435 р.</td>
<td>
<div class="number">
<span class="minus" onclick="decrem('inp6', this);">-</span>
<input type="text" value="6" id="inp6">
<span class="plus" onclick="increm('inp6', this); ">+</span>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
|
C JQuery пример, как раз то что нужно, УРА;) И спасибо!
|
| Часовой пояс GMT +3, время: 13:18. |