Question

我有以下表格TD，我需要获取值。

     <table style="border: 1px solid blue;margin: 15px;">
        <tr>
            <td class="drdsclient">DSCDS201020101</td>
        </tr>
        <tr class="drcheck">
            <td>Maximum online generations:</td>
            <td id="drcheckval" class="notopborder">30</td>
            <td id="drchecknotes" class="notopborder">notes</td>
        </tr>
        <tr class="drcheck">
            <td>Default Retention Rule set:</td>
            <td id="drcheckval" class="notopborder">No default Retention rule set</td>
            <td id="drchecknotes" class="notopborder">notes</td>
        </tr>
        <tr class="drcheck">
            <td>Default Backup Schedule set:</td>
            <td id="drcheckval" class="notopborder">No default Schedule set</td>
            <td id="drchecknotes" class="notopborder">notes</td>
        </tr>
        <tr class="drcheck">
            <td class="drdsclient">DSCDS901999102</td>
        </tr>
        <tr class="drcheck">
            <td>Maximum online generations:</td>
            <td id="drcheckval"  class="notopborder">29</td>
            <td id="drchecknotes" class="notopborder">notes</td>
        </tr>
        <tr class="drcheck">
            <td>Default Retention Rule set:</td>
            <td id="drcheckval"  class="notopborder">30 days</td>
            <td id="drchecknotes" class="notopborder">notes</td>
        </tr>
        <tr class="drcheck">
            <td>Default Backup Schedule set:</td>
            <td id="drcheckval"  class="notopborder">Monday to Friday @ 21:00</td>
            <td id="drchecknotes" class="notopborder">notes</td>
        </tr>
    </table>

我继续使用以下JS代码的ID和类：

    var array1 = [];
        $(' .drdsclient ').each(function(){
            var obj = { 
                drdsc: $(" .drdsclient ").text(),
                drcheck1: $(" #drcheck1 " ).text(),
                drcheckval1: $(" #drcheckval1 ").text(),
                drchecknotes1: $(" #drchecknotes1 ").text(),
                drcheck2: $(" #drcheck2 " ).text(),
                drcheckval2: $(" #drcheckval2 ").text(),
                drchecknotes2: $(" #drchecknotes2 ").text(),
                drcheck3: $(" #drcheck3 " ).text(),
                drcheckval3: $(" #drcheckval3 ").text(),
                drchecknotes3: $(" #drchecknotes3 ").text()
            };
            var arr2 = array1.push(obj);
        });

但是不是追加到数组，而是将值加倍，得到以下结果：

[0]
    [drdsc] => "DSCDS201020101DSCDS901999102"
    [drcheck1] => "Maximum online generations:Maximum online generations:"
    [drcheckval1] => "30999"
    [drchecknotes1] => "notesnotes"
    [drcheck2] => "Default Retention Rule set:Default Retention Rule set:"
    [drcheckval2] => "No default Retention rule set30 days"
    [drchecknotes2] => "notesnotes"
    [drcheck3] => "Default Backup Schedule set:Default Backup Schedule set:"
    [drcheckval3] => "No default Schedule setMonday to Friday @ 21:00"
    [drchecknotes3] => "notesnotes"
[1]
    [drdsc] => "DSCDS201020101DSCDS901999102"
    [drcheck1] => "Maximum online generations:Maximum online generations:"
    [drcheckval1] => "30999"
    [drchecknotes1] => "notesnotes"
    [drcheck2] => "Default Retention Rule set:Default Retention Rule set:"
    [drcheckval2] => "No default Retention rule set30 days"
    [drchecknotes2] => "notesnotes"
    [drcheck3] => "Default Backup Schedule set:Default Backup Schedule set:"
    [drcheckval3] => "No default Schedule setMonday to Friday @ 21:00"
    [drchecknotes3] => "notesnotes"

任何方式我都可以获得如下所示的数组？

[0]
    [drdsc] => "DSCDS201020101"
    [drcheck1] => Maximum online generations:"
    [drcheckval1] => "30"
    [drchecknotes1] => "notes"
    [drcheck2] => "Default Retention Rule set:"
    [drcheckval2] => "No default Retention rule set"
    [drchecknotes2] => "notes"
    [drcheck3] => "Default Backup Schedule set:"
    [drcheckval3] => "No default Schedule set"
    [drchecknotes3] => "notes"
[1]
    [drdsc] => "DSCDS901999102"
    [drcheck1] => "Maximum online generations:"
    [drcheckval1] => "999"
    [drchecknotes1] => "notes"
    [drcheck2] => "Default Retention Rule set:"
    [drcheckval2] => "30 days"
    [drchecknotes2] => "notes"
    [drcheck3] => "Default Backup Schedule set:"
    [drcheckval3] => "Monday to Friday @ 21:00"
    [drchecknotes3] => "notes"

Answer 1

您的代码中存在一些问题。首先，您在多个无效的地方重复了相同的id属性。您需要将它们更改为类。其次，在JS代码中，您尝试阅读不存在的id。看来你在id和元素索引之间感到困惑。

要真正实现您的需求，您需要遍历.drdsclient元素并检索所有以下tr元素，直到下一个.drdsclient。从那里你可以循环遍历这些行并根据需要构建对象，如下所示：

var array1 = $('.drdsclient').map(function() {
  var $client = $(this);
  var $rows = $client.closest('tr').nextUntil('tr:has(.drdsclient)');
  var obj = {
    drdsc: $client.text()
  };
  
  $rows.each(function(i) { 
    var rowNum = i + 1;
    obj['drcheck' + rowNum] = $(this).find('td:first').text();
    obj['drcheckval' + rowNum] = $(this).find('td.drcheckval').text();
    obj['drchecknotes' + rowNum] = $(this).find('td.drchecknotes').text();
  });
  
  return obj;
}).get();

console.log(array1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="border: 1px solid blue;margin: 15px;">
  <tr>
    <td class="drdsclient">DSCDS201020101</td>
  </tr>
  <tr class="drcheck">
    <td>Maximum online generations:</td>
    <td class="drcheckval notopborder">30</td>
    <td class="drchecknotes notopborder">notes</td>
  </tr>
  <tr class="drcheck">
    <td>Default Retention Rule set:</td>
    <td class="drcheckval notopborder">No default Retention rule set</td>
    <td class="drchecknotes notopborder">notes</td>
  </tr>
  <tr class="drcheck">
    <td>Default Backup Schedule set:</td>
    <td class="drcheckval notopborder">No default Schedule set</td>
    <td class="drchecknotes notopborder">notes</td>
  </tr>
  <tr class="drcheck">
    <td class="drdsclient">DSCDS901999102</td>
  </tr>
  <tr class="drcheck">
    <td>Maximum online generations:</td>
    <td class="drcheckval notopborder">29</td>
    <td class="drchecknotes notopborder">notes</td>
  </tr>
  <tr class="drcheck">
    <td>Default Retention Rule set:</td>
    <td class="drcheckval notopborder">30 days</td>
    <td class="drchecknotes notopborder">notes</td>
  </tr>
  <tr class="drcheck">
    <td>Default Backup Schedule set:</td>
    <td class="drcheckval notopborder">Monday to Friday @ 21:00</td>
    <td class="drchecknotes notopborder">notes</td>
  </tr>
</table>

另请注意，拥有增量对象属性并不是一个好主意。更好的解决方案是构建值的数组并将它们放在对象的属性中。这使得循环结果更加简单。

JavaScript将数组附加到循环

1 个答案: