使用JS构建包含具有特定类的所有元素的数组

Question

我有一个包含多行的表格。我需要从特定行获取文本并构建一个我可以传递并稍后访问的数组。我用我正在使用的代码创建了一个jsfiddle：

https://jsfiddle.net/h6x2sqk2/3/

问题在于一切都加倍了：

EEE MMM dd HH:mm:ss Z yyyy

我需要的结果是：

[
  {
    "drdsc":"DSCDS0101101",
    "bkpsets":[
      {
        "backpset":"Backup1",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      },
      {
        "backpset":"Backup2",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      },
      {
        "backpset":"Backup3",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      },
      {
        "backpset":"Backup4",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      }
    ]
  },
  {
    "drdsc":"DSCDS0202202",
    "bkpsets":[
      {
        "backpset":"Backup1",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      },
      {
        "backpset":"Backup2",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      },
      {
        "backpset":"Backup3",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      },
      {
        "backpset":"Backup4",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      }
    ]
  }
]

Answer 1

在此尝试我的建议。我所做的是从一个备份读取到另一个备份中的内容

working example

<div class="row">
    <div class="col-xs-12">
         @Umbraco.RenderMacro("MembersLoginStatus")
    </div>
</div>

Answer 2

由于$rows贯穿整个.nextUntil('tr:has(.drbkpsetdsc)')而未到下一个table，因此.bkpsrvdsc多了一行 如果将表格放入td.bkpsrvdsc

，可能会更容易

＆＃13;

＆＃13;

$(document).ready(function() {
  var dscarray = $('.bkpsrvdsc').map(function() {
    var bkpsrvdsc = $(this);

    return {
      name: $(this).find('tr:first-child > td').text(),
      contents: bkpsrvdsc.find('.drbkpset').map(function() {
        return {
          backpset: $(this).text(),
          srvrolenotes: $(this).next('tr').find('.srvrolenotes').text(),
        }
      })
    }
  });

  console.log(dscarray);
});

＆＃13;

.bkpsrvdsc table {
  width: 100%;
}
table th,
table td {
  width: 33.3333%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table style="width: 600px;">
  <thead>
    <tr>
      <th>DSC#</th>
      <th>Check</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="3" class="bkpsrvdsc">
        <table>
          <tbody>
            <tr>
              <td>DSCDS0101101</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td colspan="2" class="drbkpset">Backup1</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>Server role</td>
              <td><textarea data-autoresize rows="1" placeholder="Type notes here..." class="srvrolenotes"></textarea></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td colspan="2" class="drbkpset">Backup2</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>Server role</td>
              <td><textarea data-autoresize rows="1" placeholder="Type notes here..." class="srvrolenotes"></textarea></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td colspan="3" class="bkpsrvdsc">
        <table>
          <tbody>
            <tr>
              <td>DSCDS0202202</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td colspan="2" class="drbkpset">Backup4</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>Server role</td>
              <td><textarea data-autoresize rows="1" placeholder="Type notes here..." class="srvrolenotes"></textarea></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;