Получить значение в td с помощью rowspan

У меня есть таблица с диапазоном строк в качестве начального столбца. В конце каждой строки таблицы есть кнопка. При нажатии кнопки должны быть получены соответствующие значения строк.

$('.get-value').on("click",function(){
   var col1val = $(this).parents('table').find('.col1').text();
   var col2val = $(this).parents('tr').find('.col2').text();
   var col3val = $(this).parents('tr').find('.col3').text();
   var col4val = $(this).parents('tr').find('.col4').text();
   alert("Col1 :" + col1val + " Col2 :" + col2val + " Col3 :"+ col3val + " Col4 :" + col4val);
  });

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border = "1" style = "text-align:center" >
  <tr>
    <th> Col 1 </th>
    <th> Col 2 </th>
    <th> Col 3 </th>
    <th> Col 4 </th>
    <th> Get Row Values </th>
  </tr>
  <tr>
    <td rowspan = "5" class = "col1"> 1 </td>
    <td class = "col2"> 2 </td>
    <td rowspan = "2" class = "col3"> 4 </td>
    <td class = "col4"> 5 </td>
    <td  rowspan = "2" > <button class = "get-value"> Alert 1 </button> </td>
 </tr>
  <tr>
    <td class = "col2"> 3 </td>
    <td class = "col3"> 6 </td>
  <tr>
    <td class = "col2"> 10 </td>
    <td rowspan = "3" class = "col3"> 13 </td>
    <td class = "col4"> 14 </td>
  <tr>
    <td class = "col2"> 11 </td>
    <td class = "col3"> 15 </td>
 </tr>    
  <tr>
    <td class = "col2"> 12 </td>
    <td class = "col3"> 16 </td>
    <td rowspan = "2" > <button class = "get-value"> Alert 2 </button> </td>
 </tr>    
</table>

при нажатии на предупреждение 1 или предупреждение 2 не все значения могут быть получены

alert 1 i want result 1,2,3,4,5,6
alert 2 i want result 1,10,11,12,13,14,15,16

учиться у здесь, но не то же самое

помощь

подсказка: у вас есть несколько td для строки ... как насчет того, чтобы взглянуть на .каждый()?

— 18.12.2018 18:26

Из любопытства, действительно ли представляемые данные имеют табличный характер?

— 18.12.2018 20:38

javascript jquery html

18.12.2018 18:05

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

119

Ответы 2

В вашем коде есть несколько проблем. Сначала вам нужны строки, но вы вычисляете столбцы. Тогда вы получите только родительский tr, когда вы должны получить table.

Вот оно, я переделал его для вас. Смело спрашивайте, если вы чего-то не понимаете.

function parseAndRemoveDuplicates(arr) {
    arr = arr.split(" ").filter(e=>e)
    arr = arr.filter((v,i) => arr.indexOf(v) == i).join(" ");
    return arr;
}

$('.get-value').on("click",function(){
       var row1val = $(this).parents('table').find('.row1').text();
       var row2val = $(this).parents('table').find('.row2').text();
       var row3val = $(this).parents('table').find('.row3').text();
       var row4val = $(this).parents('table').find('.row4').text();
       var row5val = $(this).parents('table').find('.row5').text();
       var rowsValues = "Row1 :" + row1val + " Row2 :" + row2val + " Row3 :"+ row3val + " Row4 :" + row4val + " Row5 :" + row4val;
       var alert1 = parseAndRemoveDuplicates(row1val + row2val);
       var alert2 = parseAndRemoveDuplicates(row3val + row4val + row5val);
       console.info(alert1);
       console.info(alert2);
  });

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border = "1" style = "text-align:center" >
    <tr>
      <th> Col 1 </th>
      <th> Col 2 </th>
      <th> Col 3 </th>
      <th> Col 4 </th>
      <th> Get Row Values </th>
    </tr>
    <tr>
      <td rowspan = "5" class = "row1 row2 row3 row4 row5"> 1 </td>
      <td class = "row1"> 2 </td>
      <td rowspan = "2" class = "row1 row2"> 4 </td>
      <td class = "row1"> 5 </td>
      <td  rowspan = "2" > <button class = "get-value"> Alert 1 </button> </td>
   </tr>
    <tr>
      <td class = "row2"> 3 </td>
      <td class = "row2"> 6 </td>
    <tr>
      <td class = "row3"> 10 </td>
      <td rowspan = "3" class = "row3 row4 row5"> 13 </td>
      <td class = "row3"> 14 </td>
    <tr>
      <td class = "row4"> 11 </td>
      <td class = "row4"> 15 </td>
   </tr>    
    <tr>
      <td class = "row5"> 12 </td>
      <td class = "row5"> 16 </td>
      <td rowspan = "2" > <button class = "get-value"> Alert 2 </button> </td>
   </tr>    
  </table>

вот лучшая версия:

function parseAndRemoveDuplicates(arr) {
    arr = arr.split(" ").filter(e=>e)
    arr = arr.filter((v,i) => arr.indexOf(v) == i).join(" ");
    return arr;
}

function getValuesFromRows(obj, rowclasses) {
       var table = $(obj).parents('table');
       return parseAndRemoveDuplicates(table.find(rowclasses).text());
}

$('.get-value').on("click",function(){
       var alert1 = getValuesFromRows(this, '.row1,.row2');
       var alert2 = getValuesFromRows(this, '.row3,.row4,.row5');
       console.info(alert1);
       console.info(alert2);
  });

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border = "1" style = "text-align:center" >
    <tr>
      <th> Col 1 </th>
      <th> Col 2 </th>
      <th> Col 3 </th>
      <th> Col 4 </th>
      <th> Get Row Values </th>
    </tr>
    <tr>
      <td rowspan = "5" class = "row1 row2 row3 row4 row5"> 1 </td>
      <td class = "row1"> 2 </td>
      <td rowspan = "2" class = "row1 row2"> 4 </td>
      <td class = "row1"> 5 </td>
      <td  rowspan = "2" > <button class = "get-value"> Alert 1 </button> </td>
   </tr>
    <tr>
      <td class = "row2"> 3 </td>
      <td class = "row2"> 6 </td>
    <tr>
      <td class = "row3"> 10 </td>
      <td rowspan = "3" class = "row3 row4 row5"> 13 </td>
      <td class = "row3"> 14 </td>
    <tr>
      <td class = "row4"> 11 </td>
      <td class = "row4"> 15 </td>
   </tr>    
    <tr>
      <td class = "row5"> 12 </td>
      <td class = "row5"> 16 </td>
      <td rowspan = "2" > <button class = "get-value"> Alert 2 </button> </td>
   </tr>    
  </table>

Спасибо всем, весь код работает. не могу принять ответ,

— 19.12.2018 01:20

18.12.2018 18:25

Следующий код изменяет первый ответ Нельсона Тейшейры, заставляя каждое предупреждение предоставлять числовые значения в отсортированном порядке. Кроме того, теперь, когда вы щелкаете каждое предупреждение, код предоставляет только данные, соответствующие конкретному предупреждению, а именно:

function parseAndRemoveDuplicates(arr) {
  arr = arr.split(" ").filter(e => e)
  arr = arr.filter((v, i) => arr.indexOf(v) == i).sort().join(" ");
  return arr;
}

function getValuesFromRows(obj, rowclasses) {
  var table = $(obj).parents('table');
  return parseAndRemoveDuplicates(table.find(rowclasses).text());
}
$('#but1').on("click", function() {
  var alert1 = getValuesFromRows(this, '.row1,.row2');
  console.info(alert1);
});
$('#but2').on("click", function() {
  var alert2 = getValuesFromRows(this, '.row3,.row4,.row5');

  console.info(alert2);



});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border = "1" style = "text-align:center">
  <tr>
    <th> Col 1 </th>
    <th> Col 2 </th>
    <th> Col 3 </th>
    <th> Col 4 </th>
    <th> Get Row Values </th>
  </tr>
  <tr>
    <td rowspan = "5" class = "row1 row2 row3 row4 row5"> 1 </td>
    <td class = "row1"> 2 </td>
    <td rowspan = "2" class = "row1 row2"> 4 </td>
    <td class = "row1"> 5 </td>
    <td rowspan = "2"> <button id='but1' class = "get-value"> Alert 1 </button> </td>
  </tr>
  <tr>
    <td class = "row2"> 3 </td>
    <td class = "row2"> 6 </td>
    <tr>
      <td class = "row3"> 10 </td>
      <td rowspan = "3" class = "row3 row4 row5"> 13 </td>
      <td class = "row3"> 14 </td>
      <tr>
        <td class = "row4"> 11 </td>
        <td class = "row4"> 15 </td>
      </tr>
      <tr>
        <td class = "row5"> 12 </td>
        <td class = "row5"> 16 </td>
        <td rowspan = "2"> <button id='but2' class = "get-value"> Alert 2 </button> </td>
      </tr>
</table>

Чтобы отсортировать числовые значения, код слегка настраивает parseAndRemoveDuplicates(), сортируя значения массива перед объединением их в строковый результат.

По общему признанию, решение для того, чтобы каждое предупреждение предоставляло отдельные данные, включает в себя менее элегантный код, добавление уникального идентификатора к каждому элементу кнопки и последующее создание аналогичной функции для каждого для отображения соответствующего результата.

18.12.2018 20:56

Другие вопросы по теме

Вверх прокрутите смещение var для разной ширины браузера | высоты

Получите значение, щелкнув опцию

Javascript For Loop итераций в буфере обмена с методом добавления

Я хочу знать, как мне получить доступ к элементам модальной формы в моем коде. Также я хочу знать, как применить валидатор jquery в модальной форме

Попытка загрузить Slick Carousel в Foundation 6.5

Как установить цвет фона тела с помощью JS до полной загрузки страницы?

Различные цвета при наведении курсора, когда элемент щелкают, но не щелкают в JQuery

Кнопка html не вызывает функцию onclick js

Безопасно или небезопасно потенциально видеть их PHP session_id ()

Модальные окна ответа Bootstrap 4 ASP.NET MVC 5 - как отобразить без нажатия кнопки

Получить значение в td с помощью rowspan

Ответы 2

Другие вопросы по теме

Похожие вопросы