Форум

ivt22 · #1 (**permalink**) 07.01.2016, 17:37

Добрый вечер, только начал изучать 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

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>

Keramet · #3 (**permalink**) 08.01.2016, 15:49

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

ivt22 · #4 (**permalink**) 11.01.2016, 09:27

C JQuery пример, как раз то что нужно, УРА

И спасибо!

Форум

Справочник

Discord чат

Курсы javascript