Как получить несколько выбранных значений массива ячеек с флажком в JQuery, а затем отправить с постом AJAX - PullRequest
Новая
       5

Как получить несколько выбранных значений массива ячеек с флажком в JQuery, а затем отправить с постом AJAX

0 голосов
/ 27 ноября 2018

Как мне получить значение массива из ячейки таблицы, если установить флажок с помощью jQuery?Если я выбрал ячейку 1, я хочу получить массив типа ["BlackBerry Bold", "2/5", "UK"], но если я выбрал все из них, я хочу получить все данные в виде массива массивов. 

<table border="1">
<tr>
  <th><input type="checkbox" /></th>
  <th>Cell phone</th>
  <th>Rating</th>
  <th>Location</th>
</tr>
<tr>
  <td align="center"><input type="checkbox"/></td>
  <td>BlackBerry Bold 9650</td>
  <td>2/5</td>
  <td>UK</td>
</tr>
<tr>
  <td align="center"><input type="checkbox" /></td>
  <td>Samsung Galaxy</td>
  <td>3.5/5</td>
  <td>US</td>
</tr>
<tr>
  <td align="center"><input type="checkbox"/></td>
  <td>Droid X</td>
  <td>4.5/5</td>
  <td>REB</td>
</tr>

Пожалуйста, помогите.

Ответы [ 2 ]

0 голосов
/ 27 ноября 2018

Onclick получить 3 дочерних элементов родителя и добавить контент к данным.Использовал jquery nextAll для братьев и сестер и склеил необходимые 3.

  • Прикрепленное событие к таблице, onclick проверит, является ли элемент INPUT.
  • Если это input, получит родительский элемент для этого ввода, который будет <td>.
  • Для этого родительского элемента, получим трех братьев и сестер, используя jquery.
  • Добавим в избранное, если не присутствует, удалите, используя indexOf.

CodePen для васplayaround: [https://codepen.io/vivekamin/pen/oQMeXV] 

   
let selectedData = []
let para = document.getElementById("selectedData");
let tableElem = document.getElementById("table");
tableElem.addEventListener("click", function(e) {
  if(e.target.tagName === 'INPUT' ){
    
    let parent = e.target.parentNode;
    let data  = [];
    $(parent).nextAll().map(function(index, node){
      data.push(node.textContent);
    })
 
    let index = selectedData.indexOf(JSON.stringify(data))
    if(index == -1){
       selectedData.push(JSON.stringify(data));
    }
    else{
      selectedData.splice(index,1);
    }
   
    para.textContent = "";
    para.innerHTML = selectedData ;
  }
   
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table border="1" id="table">
<tr>
  <th><input type="checkbox" /></th>
  <th>Cell phone</th>
  <th>Rating</th>
  <th>Location</th>
</tr>
<tr>
  <td align="center"><input type="checkbox"/></td>
  <td>BlackBerry Bold 9650</td>
  <td>2/5</td>
  <td>UK</td>
</tr>
<tr>
  <td align="center"><input type="checkbox" /></td>
  <td>Samsung Galaxy</td>
  <td>3.5/5</td>
  <td>US</td>
</tr>
<tr>
  <td align="center"><input type="checkbox"/></td>
  <td>Droid X</td>
  <td>4.5/5</td>
  <td>REB</td>
</tr>
</table>
<h3> Selected Data: </h3>
 <p id="selectedData"></p>
0 голосов
/ 27 ноября 2018

Обновлено в соответствии с вашими потребностями.

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

Я предоставил ниже скрипку, которая выведет массив в консоль. 

function buildTheArray(){
    var thearray = [];
    $("input:checked").parent().siblings().each(function(){
        thearray.push($(this).text());
    });
    return thearray;
}

$("input[type='checkbox']").change(function(){
    console.log(buildTheArray());
});

Fiddle: http://jsfiddle.net/gcu4L5p6/

...