Как получить данные таблицы с элементами "только для чтения"

Я пытаюсь получить все элементы моей таблицы, у нее есть кнопка, которая добавляет строку с редактируемыми входами, но также, если она нажата, более старые входы получают опору «только для чтения». Все это в форме с кнопкой отправки, проблема в том, что я не могу получить данные строк с опорой "только для чтения", но я получаю те, которые находятся в span.

Мой js.

$('#form_trasferencia').submit(function (e) {
  e.preventDefault()
  var table = $('#tabla_transferencia')
  var salida = {}
  table.find('tr').each(function (i, el) {
    var $tds = $(this).find('td'),

    codigo = $tds.eq(0).val() || $tds.eq(0).text(),
    cantidad = $tds.eq(3).val() || $tds.eq(3).text(),
    costo_unit = $tds.eq(4).val() || $tds.eq(4).text(),
    total = $tds.eq(5).val() || $tds.eq(5).text(),

    aux = {'codigo': codigo, 'cantidad': cantidad, 'costo_unit': costo_unit, 'total': total}

   console.info(aux)
  })

Мой стол

<table class = "table table-striped table-bordered" id = "tabla_transferencia">
  <thead>
    <tr>
      <th style = "width: 80px">Codigo</th>
      <th style = "width: 500px">Descripción</th>
      <th>Existencias</th>
      <th>Cantidad</th>
      <th>Costo/Unit</th>
      <th style = "width: 40px">Total</th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <tr id='row0' class = "datos_tabla_transferencia">
      <td><input type = "text" id = "txt_transferencia_codigo0" placeholder = "Ingese el código" required></td>
      <td><span id = "spn_transferencia_descripcion0"></span></td>
      <td><span id = "spn_transferencia_existencias0"></span></td>
      <td><input type = "number" id = "txt_transferencia_cantidad0" placeholder = "Cantidad" required readonly></td>
      <td><input type = "text" id = "txt_transferencia_costoUni0" placeholder = "Costo/Unitario" required readonly></td>
      <td><span id = "spn_transferencia_total0"></span></td>
      <td>
        <button type = "button" id = "0" data-id = "row0" class = "btn btn-danger
                                                        btn-xs remove">-
                                                </button>
      </td>
    </tr>
  </tbody>


</table>
<button id = "btn_transferencia_nuevo" class = "btn btn-default pull-left" disabled>
 Agregar
</button>

Как получить данные таблицы с элементами "только для чтения"

Мой результат

Как получить данные таблицы с элементами "только для чтения"

Вы можете разместить свой HTML-код таблицы? Было бы полезно

— 11.03.2018 02:09

@Basel Issmail, конечно

— 11.03.2018 02:11

javascript jquery laravel html-table

11.03.2018 01:52

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

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

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

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

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

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

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

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

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

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

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

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

1 726

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что вы выбираете либо
$ tds.eq (0) .text (), который является текстом внутри элемента тд => который является текстом внутри span
или
$ tds.eq (0) .val (), который является значением элемента тд => td не имеет значения, поэтому он возвращает пустое значение (что является причиной вашей проблемы)

вместо этого вы должны выбрать значение элемента Вход, который находится внутри тд

вы можете попробовать что-то вроде этого:
замените эти строки

codigo = $tds.eq(0).val() || $tds.eq(0).text(),
cantidad = $tds.eq(3).val() || $tds.eq(3).text(),
costo_unit = $tds.eq(4).val() || $tds.eq(4).text(),
total = $tds.eq(5).val() || $tds.eq(5).text(),

с участием

odigo = $tds.eq(0).find('input').val() || $tds.eq(0).text(),
cantidad = $tds.eq(3).find('input').val()  || $tds.eq(3).text(),
costo_unit = $tds.eq(4).find('input').val() || $tds.eq(4).text(),
total = $tds.eq(5).find('input').val()  || $tds.eq(5).text(),

который указывает, что вам нужен либо текст, либо значение Вход внутри тд, а не значение самого тд.

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

— 11.03.2018 02:36

11.03.2018 02:29