Javascript store table in a variable with conditions

Question

This is how my page looks like:

<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>

I would like to store the tables with class name bgLtTable. These table can appear up to 3-4 times in this page. Is it possible to get the specific table using the div above it? Something like:

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

A div or a table as a direct child of tr is not valid HTML. Whether a query selector or a DOM getter would find the wanted table from invalid HTML, is implementation-depended. I'd suggest you to fix the HTML before anything else. — Teemu
– Teemu, Commented Aug 18, 2017 at 4:58
@Teemu I think before it was valid because this website is very old. I just got it and was not allowed to make too many adjustments. Because they say "it works" — user3051207
– user3051207, Commented Aug 18, 2017 at 5:01
No, it has never been valid. There's no guarantees the code would work in all browser, since there's no standard for invalid HTML. — Teemu
– Teemu, Commented Aug 18, 2017 at 5:01

Komal12 · Accepted Answer · 2017-08-18 06:00:45Z

1

Maybe try to use document.getElementsByTagName("TABLE");

This will give you an object that is accessible via index

You can then assign those elements to a variable and loop through it but look where the class attribute is equal to className for example

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

I am not 100% sure this answers your question how I understand is you just want to get the class.

I hope this helps I am also pretty new to coding but always willing to help if I can.

edited Aug 18, 2017 at 6:00

Komal12

3,3584 gold badges18 silver badges25 bronze badges

answered Aug 18, 2017 at 5:23

Devaux

431 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3051207 Over a year ago

I updated my question. Hope it helps you understand the problem more.

gjijo · Accepted Answer · 2017-08-18 06:41:34Z

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>

This method will give you the html of the required table.

edited Aug 18, 2017 at 6:41

answered Aug 18, 2017 at 5:30

gjijo

1,20612 silver badges16 bronze badges

8 Comments

gjijo Over a year ago

You can do it using pure java-script. but you may have to put more effort on it. Search how to find a div containing certain text. Then its parent table. As far as I've read, It has no direct inbuilt methods in java-script to find the parent div.

gjijo Over a year ago

Else, give a class to parent tr's you can loop through all parents tr's. Find its inner div's(having class smTitle) and tables. If the div(smTitle) has text 'your custom text', the set the table to a variable and break the loop. If not continue the looping till you reach your corresponding div.

gjijo Over a year ago

@irayan05: I've provided both methods -J Query & java-script. You can prefer any one which is easiest.

gjijo Over a year ago

Its an array. So CustomerAddressesTable[0] will work

gjijo Over a year ago

Let us continue this discussion in chat.

|

Collectives™ on Stack Overflow

Javascript store table in a variable with conditions

2 Answers 2

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related