JavaScript 从循环追加数组到数组

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>

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