Доступ к данным в объекте, сгенерированном из строк таблицы с ключами - PullRequest
Новая
       4

Доступ к данным в объекте, сгенерированном из строк таблицы с ключами

0 голосов
/ 01 мая 2020

Я сгенерировал (массив?) Следующий объект (json?), Используя приведенный ниже код, примененный к таблице с ключевыми идентификаторами для строки, но я не уверен, что правильно понял ее. Можете ли вы дать мне представление о том, как получить доступ к элементу в этом массиве / объекте, используя ключ и номер элемента в качестве индекса? Использование обычной переменной [] [] в этом случае не работает.

Объект (tableData):

ключ: ключ: 1 значения: (3) […] 0: "D" 1: "E" 2: "F" длина: 3 значения: Array (3) ["D", "E", "F"]: {…

(et c. Et c для каждой клавиши)

Таблица Javascript: 

    $("#btn1").click(function(){

      var tableData = $('tr[data-key]').map(function(){
       var $row= $(this), key = $row.data('key');
        var values= $row.find(':input').map(function(){
            return this.value
        }).get();    
        return {
            key:key,
            values:values
        }
    }).get();


})

Таблица HTML: 

<table class="table order-list">
  <thead>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </thead>
  <tbody>
 <tr data-key="1">
    <td> <input type="text" class="pull-right form-control" name="" value="D"></td>
     <td> <input type="text" class="pull-right form-control" name="" value="E"></td>
        <td> <input type="text" class="pull-right form-control" name="" value="F"></td>
  </tr>

   <tr data-key="2">
    <td> <input type="text" class="pull-right form-control" name="" value="H"></td>
     <td> <input type="text" class="pull-right form-control" name="" value="I"></td>
        <td> <input type="text" class="pull-right form-control" name="" value="J"></td>

    </tr>


       <tr data-key="3">
    <td> <input type="text" class="pull-right form-control" name="" value="K"></td>
     <td> <input type="text" class="pull-right form-control" name="" value="L"></td>
        <td> <input type="text" class="pull-right form-control" name="" value="M"></td>
  </tr>
  </tbody>



</table>


<button id="btn1" style="width:100px, height:100px">Click</button>

Ответы [ 3 ]

1 голос
/ 01 мая 2020

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

console.clear();

$("#btn1").click(function(){

      var tableData = $('tr[data-key]').map(function(){
       var $row= $(this), key = $row.data('key');
        var values= $row.find(':input').map(function(){
            return this.value
        }).get();    
        return {
            key:key,
            values:values
        }
    }).get();

  const firstRow = tableData[0];
  console.log('first row:', firstRow)
  console.log('key of first row:', firstRow.key)
  console.log('values of first row:', firstRow.values)
  console.log('single value from first row values:', firstRow.values[0]);
})
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <table class="table order-list">
  <thead>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </thead>
  <tbody>
 <tr data-key="1">
    <td> <input type="text" class="pull-right form-control" name="" value="D"></td>
     <td> <input type="text" class="pull-right form-control" name="" value="E"></td>
        <td> <input type="text" class="pull-right form-control" name="" value="F"></td>
  </tr>

   <tr data-key="2">
    <td> <input type="text" class="pull-right form-control" name="" value="H"></td>
     <td> <input type="text" class="pull-right form-control" name="" value="I"></td>
        <td> <input type="text" class="pull-right form-control" name="" value="J"></td>

    </tr>


       <tr data-key="3">
    <td> <input type="text" class="pull-right form-control" name="" value="K"></td>
     <td> <input type="text" class="pull-right form-control" name="" value="L"></td>
        <td> <input type="text" class="pull-right form-control" name="" value="M"></td>
  </tr>
  </tbody>



</table>


<button id="btn1" style="width:100px, height:100px">Click</button>
  
  
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</body>
</html>
1 голос
/ 01 мая 2020

Чтобы решить эту проблему с помощью имеющегося кода, вы можете сделать следующее: 

const tableData = // tableData
const row1 = tableData[0];
const row1Values = row1.values;
const row1Value1 = row1Values[0];

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

Скорее вы захотите переписать свой код, чтобы получить данные таблицы, представляющие собой двумерный массив ([] []). 

$("#btn1").click(function () {
    const tableData = $('tr[data-key]').map(function () {
        const $row = $(this);
        const key = $row.data('key');

        const values = $row.find(':input').map(function () {
            return this.value;
        }).get();

        return values; // This is the only line that really changed
    }).get();
})

PS. Я бы порекомендовал привыкнуть не объявлять несколько переменных в одной строке одним и тем же ключевым словом, это облегчает чтение вашего кода для вас и других, но это дело вкуса.

1 голос
/ 01 мая 2020

.get () возвращает массив, а не объект. Вы должны были бы получить доступ к массиву по индексу. Итак, если бы я хотел, скажем, ячейку F - это было бы tableData [0] .values ​​[2].

tableData дает мне массив, tableData [0] дает мне объект {key: 1, values: ["D", "E", "F"]}, tableData [0] .values ​​дает мне массив значений ["D", "E", "F"], tableData [0] .values ​​[ 2] дает мне значение по индексу 2 этого массива. Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...