如何使用jquery从表中获取所有数据，包括输入和选择标签值？

debugcn 发表于 Dev

耶洛洛兹

我有一个从数据库填充的表。

@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);
});

控制台返回未定义。

PS：该表是动态的，并且是从数据库填充的。将表数据推送到数组后，我将它们插入到另一个表中。

斯瓦蒂

您可以简单地使用is(":checked")此方法获得复选框状态，这将返回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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。