Javascript将表存储在具有条件的变量中

时间:2017-08-18 04:54:48

标签: javascript jquery html

这就是我的页面的样子:

<div class="bgSmTitle smTitle">Customer Addresses</div>
<table class="bgLtTable">
  <tr>
    <td class="bgLtRow1 padded">New York</td>
  </tr>
  <tr>
    <td class="bgLtRow1 padded">Osaka</td>
  </tr>
  <tr>
    <td class="bgLtRow1 padded">Los Angeles</td>
  </tr>
</table>

<div class="bgSmTitle smTitle">Family Members</div>
<table class="bgLtTable">
  <tr>
    <td class="bgHeader1 padded" style="width:24%;">Name</td>
    <td class="bgHeader2 padded" style="width:10%;">Relationship</td>
    <td class="bgHeader1 padded" style="width:30%;">Age</td>
  </tr>
  <tr>
    <td class="bgLtRow1 padded">Jordan</td>
    <td class="bgLtRow2 padded">Father</td>
    <td class="bgLtRow1 padded">58</td>
  </tr>
</table>

我想存储类名为bgLtTable的表。这些表在此页面中最多可显示3-4次。是否可以使用上面的div来获取特定的表格?类似的东西:

var tableAddress = div.innerHtml="Customer Addresses".table.bgLtTable;
var tableMembers = div.innerHtml="Family Members".table.bgLtTable;

2 个答案:

答案 0 :(得分:2)

也许尝试使用document.getElementsByTagName("TABLE");

这将为您提供一个可通过索引

访问的对象

然后,您可以将这些元素分配给变量并循环遍历它,但查看class属性等于className的位置,例如

var element = document.getElementsByTagName("TABLE");
for (var i = 0; element.length > i; i++)
{
    var elementClass = element[i].getAttribute('class');
}

我不是百分百肯定这回答了你的问题我的理解是你只是想上课。

我希望这有助于我对编码也很陌生,但如果可以,我总是愿意提供帮助。

答案 1 :(得分:0)

var CustomerAddressesTable = $('div.smTitle:contains("Customer Addresses")').next('.bgLtTable');
console.log($("<div />").append($(CustomerAddressesTable).clone()).html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="prnt">
    <td>
      <div class="bgSmTitle smTitle">Customer Addresses</div>
      <table class="bgLtTable">
        <tr>
          <td class="bgLtRow1 padded">New York</td>
        </tr>
        <tr>
          <td class="bgLtRow1 padded">Osaka</td>
        </tr>
        <tr>
          <td class="bgLtRow1 padded">Los Angeles</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr class="prnt">
    <td colspan="3">
      <div class="bgSmTitle smTitle">Family Members</div>
      <table class="bgLtTable">
        <tr>
          <td class="bgHeader1 padded" style="width:24%;">Name</td>
          <td class="bgHeader2 padded" style="width:10%;">Relationship</td>
          <td class="bgHeader1 padded" style="width:30%;">Age</td>
        </tr>
        <tr>
          <td class="bgLtRow1 padded">Jordan</td>
          <td class="bgLtRow2 padded">Father</td>
          <td class="bgLtRow1 padded">58</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

此方法将为您提供所需表格的html。