Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.01.2016, 17:37
Интересующийся
Отправить личное сообщение для ivt22 Посмотреть профиль Найти все сообщения от ivt22
 
Регистрация: 03.01.2016
Сообщений: 12

Узнать 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>
Ответить с цитированием
  #2 (permalink)  
Старый 07.01.2016, 21:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #3 (permalink)  
Старый 08.01.2016, 15:49
Профессор
Отправить личное сообщение для Keramet Посмотреть профиль Найти все сообщения от Keramet
 
Регистрация: 30.12.2015
Сообщений: 194

С селектором 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>

Последний раз редактировалось Keramet, 08.01.2016 в 16:04.
Ответить с цитированием
  #4 (permalink)  
Старый 11.01.2016, 09:27
Интересующийся
Отправить личное сообщение для ivt22 Посмотреть профиль Найти все сообщения от ivt22
 
Регистрация: 03.01.2016
Сообщений: 12

C JQuery пример, как раз то что нужно, УРА И спасибо!
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопрос по jquery - как узнать какой тэг? APL Общие вопросы Javascript 7 09.06.2016 15:22
Как узнать значение SpiriKoN jQuery 7 12.11.2014 20:36
Как узнать что полоса прокрутки коснулся самого низа Грабовский Элементы интерфейса 3 15.01.2012 14:33
Изменение цвета ячейки в таблице, при наведении на строку другой таблицы Psychosonic Общие вопросы Javascript 12 24.11.2010 16:44
определить положение ячейки в таблице RRRinat Элементы интерфейса 6 27.04.2010 14:32