Форум

nikolayblinov · #1 (**permalink**) 02.07.2016, 00:51

У меня такая задача: перемножить значение в инпуте на значение во второй ячейки каждого ряда, и выводить результат в третьей ячейки.

Не могу достать значение из второй ячейки

Как это проще сделать ?

<form id="myForm"><input type="number" id="myNumber" value="5"><input type="submit" value="Do"></form>
<table class="my-table">
<thead>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 2</th>
    </tr>
</thead>
<tbody>
    <tr data-row-num="1">
        <td>Item 1</td>
        <td>10</td>
        <td>10</td>
    </tr>
    <tr data-row-num="1">
        <td>Item 2</td>
        <td>100</td>
        <td>10</td>
    </tr>
    <tr data-row-num="1">
        <td>Item 3</td>
        <td>1000</td>
        <td>10</td>
    </tr>
</tbody>
</table>

<script type="text/javascript">
$('#myForm').submit(function(e){
    e.preventDefault();
      var input = parseInt($(this).find('#myNumber').val()); 
    $('.my-table tr td:last-child').each(function(k, item){
    var second =  parseInt($(this).find('.my-table tr td:nth(2)-child').val());
    var current = parseInt($(item).text());
    $(item).text(second * input);
  });
  return false;
});
</script>

Оно же тут https://jsfiddle.net/mds0bxyo/

рони · #2 (**permalink**) 02.07.2016, 00:58

nikolayblinov,
нет value у ячейки!!!

рони · #3 (**permalink**) 02.07.2016, 01:04

Сообщение от nikolayblinov

td:nth(2)-child

рони · #4 (**permalink**) 02.07.2016, 01:06

nikolayblinov,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
 $(function(){
 $('#myForm').submit(function(e){
    e.preventDefault();
    var input = parseInt($('#myNumber').val());
    $('.my-table tbody tr').each(function(k, item){
    var second =  parseInt($(this).find('td:nth-child(2)').text());
    $(this).find('td:nth-child(3)').text(second * input);
  });
  });
   })
  </script>
</head>

<body>
<form id="myForm"><input type="number" id="myNumber" value="5"><input type="submit" value="Do"></form>
<table class="my-table">
<thead>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 2</th>
    </tr>
</thead>
<tbody>
    <tr data-row-num="1">
        <td>Item 1</td>
        <td>10</td>
        <td>10</td>
    </tr>
    <tr data-row-num="1">
        <td>Item 2</td>
        <td>100</td>
        <td>10</td>
    </tr>
    <tr data-row-num="1">
        <td>Item 3</td>
        <td>1000</td>
        <td>10</td>
    </tr>
</tbody>
</table>
</body>
</html>

Rasy · #5 (**permalink**) 02.07.2016, 09:40

рони,
Как вы могли оставить return false в коде, ведь уже есть отмена события по умолчанию) Или я чего-то недопонимаю?

рони · #6 (**permalink**) 02.07.2016, 10:08

Сообщение от Rasy

Как вы могли

был потрясён предоставленным кодом

особенно поиском ячеек в ячейке

Форум

Справочник

Discord чат

Курсы javascript