Блог

Главная - Вопросы по программированию - Как получить все данные из таблицы, включая ввод и выбор значения тега, с помощью jquery?

Как получить все данные из таблицы, включая ввод и выбор значения тега, с помощью jquery?

#jquery #laravel

#jquery #laravel

Вопрос:

У меня есть таблица, которая заполняется из базы данных.

 @foreach ($cabinclist as $item)
<tr>
    <input type="hidden" name="" value="{{$item->checklist_id}}" class="clistid">
    <td scope="row">{{$item->rownum}}</td>
    <td>{{$item->cdescription}}</td>
    <td><input type="checkbox" class="cbisactive"></td>
    <td>
        <select style="width: 100%; border:0px;background: none;outline:none;" class="cbcond">
            <option selected="selected"></option>
            <option value="OK">OK</option>
            <option value="N/A">N/A</option>
            <option value="Damage">Damage</option>
            <option value="Missing">Missing</option>
        </select>
    </td>
</tr>
@endforeach

введите описание изображения здесь

Я просто хочу получить все значения данных таблицы, включая выбранный элемент в select теге и checkbox ввод.

Что я сделал до сих пор (перепробовал все ответы здесь, в stackoverflow):

 var cbarry = [];
$("#cabintable > tbody > tr").each(function () {
    
    var checkBox = $(this).find('td .isactive > input').eq(2);
    checkBox.prop('checked',!checkBox.prop('checked'));

    cbarry.push(
        { 
            "clist": $(this).find('td').eq(1).text(), //this is correct
            "cbisactive": checkBox, //i want to get the checkbox state but its not workin
            "cbcond": $(this).find('td').eq(3).html() // and also the value of the selected item.
        });
    console.log(cbarry);
});

Консоль возвращает undefined.

PS: Таблица является динамической и заполняется из базы данных. после переноса данных таблицы в массив я вставлю их в другую таблицу.

Ответ №1:

Вы можете получить состояние флажков, просто используя is(":checked") this will return true или false в зависимости от состояния флажков.Кроме того, для получения значения выбора .val() это даст вам selected значение.

Демонстрационный код :

 var cbarry = [];
$("button").click(function() {
  $("#cabintable > tbody > tr").each(function() {
    cbarry.push({
      "clist": $(this).find('td').eq(1).text(), 
      "cbisactive": $(this).find(".cbisactive").is(":checked"), //get checked values
      "cbcond": $(this).find('.cbcond').val() //get slect value
    });
  });
  console.log(cbarry);

})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cabintable">
  <tbody>
    <tr>
      <input type="hidden" name="" value="1" class="clistid">
      <td scope="row">1</td>
      <td>Soemthing</td>
      <td><input type="checkbox" class="cbisactive"></td>
      <td>
        <select style="width: 100%; border:0px;background: none;outline:none;" class="cbcond">
          <option selected="selected"></option>
          <option value="OK">OK</option>
          <option value="N/A">N/A</option>
          <option value="Damage">Damage</option>
          <option value="Missing">Missing</option>
        </select>
      </td>
    </tr>
    <tr>
      <input type="hidden" name="" value="2" class="clistid">
      <td scope="row">2</td>
      <td>something2</td>
      <td><input type="checkbox" class="cbisactive"></td>
      <td>
        <select style="width: 100%; border:0px;background: none;outline:none;" class="cbcond">
          <option selected="selected"></option>
          <option value="OK">OK</option>
          <option value="N/A">N/A</option>
          <option value="Damage">Damage</option>
          <option value="Missing">Missing</option>
        </select>
      </td>
    </tr>
    <tr>
      <input type="hidden" name="" value="3" class="clistid">
      <td scope="row">3</td>
      <td>soemthing 3</td>
      <td><input type="checkbox" class="cbisactive"></td>
      <td>
        <select style="width: 100%; border:0px;background: none;outline:none;" class="cbcond">
          <option selected="selected"></option>
          <option value="OK">OK</option>
          <option value="N/A">N/A</option>
          <option value="Damage">Damage</option>
          <option value="Missing">Missing</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

<button>Click me </button>