Question 36047 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Get outerHTML from an HTMLCollection – Jquery

I already know that we can get outerHTML if the element can access direly like

    var htmlString = $('#mySelectBox').outerHTML;

What if the element can’t access directly because it is generated from a framework like ASP Entity Framework and we do not have direct access to that element but to one of its grand parents, like

    $('#table-body:first-child').closest('select').children;

This children property returns an HTMLCollection and is there a way to get outerHTML of each child of that HTMLCollection.

    var optionsHTMLCollection = $('#table-body:first-child').closest('select').children;

I tried this, but failed.

    var optionsAsHTMLString = '';
    for (var i=0; i<optionsHTMLCollection.length; I++) {
       optionsAsHTMLString 
    }

Update 1(Because @Twisty is asking for more HTML in the comments below. I’m pasting as it is. Later I will minimize more)

<table class="table table-dark table-hover">
    <thead class="align-middle">
        <tr>
            <th scope="col">Seq No</th>
            <th scope="col">Item Category</th>
            <th scope="col">Percentage (%)</th>
            <th scope="col">Item Name</th>
            <th class="text-center" scope="col">Actions</th>
        </tr>
    </thead>
    <tbody id="table-body">
        <tr>
            <th scope="row">1</th>
            <td>
                <select class="form-select"
                    data-val="true" data-val-required="The ItemCatId field is required."
                    id="PolyCombItemCatBridgeList_0__ItemCatId" name="PolyCombItemCatBridgeList[0].ItemCatId">
                    <option selected>-- select product finishing type --</option>
                    <option value="1">HIGH DENSITY POLYETHYLENE</option>
                    <option value="2">LINEAR LOW DENSITY POLYETHYLENE</option>
                </select>
                <b><span class="text-danger" for=""></span></b>
            </td>
            <td>
                <input type="text" class="form-control" placeholder="Percentage" data-val="true"
                    data-val-number="The field Percentage must be a number."
                    data-val-range="Percentage is between 0% and 100%" data-val-range-max="100" data-val-range-min="0"
                    data-val-required="The Percentage field is required." id="PolyCombItemCatBridgeList_0__Percentage"
                    name="PolyCombItemCatBridgeList[0].Percentage" value="">
                <b><span class="text-danger" for="BagType.Isactive"></span></b>
            </td>
            <td class="align-bottom">
                <div>
                    <button type="button" class="btn btn-danger rounded del-this-row"><i
                            class="fa-regular fa-trash-can"></i> Delete</button>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">1</th>
            <td>
                <select class="form-select" 
                    data-val="true" data-val-required="The ItemCatId field is required."
                    id="PolyCombItemCatBridgeList_1__ItemCatId" name="PolyCombItemCatBridgeList[1].ItemCatId">
                    <option selected>-- select product finishing type --</option>
                    <option value="1">HIGH DENSITY POLYETHYLENE</option>
                    <option value="2">LINEAR LOW DENSITY POLYETHYLENE</option>
                </select>
                <b><span class="text-danger" for=""></span></b>
            </td>
            <td>
                <input type="text" class="form-control" placeholder="Percentage" data-val="true"
                    data-val-number="The field Percentage must be a number."
                    data-val-range="Percentage is between 0% and 100%" data-val-range-max="100" data-val-range-min="0"
                    data-val-required="The Percentage field is required." id="PolyCombItemCatBridgeList_1__Percentage"
                    name="PolyCombItemCatBridgeList[1].Percentage" value="">
                <b><span class="text-danger" for="BagType.Isactive"></span></b>
            </td>
            <td class="align-bottom">
                <div>
                    <button type="button" class="btn btn-danger rounded del-this-row"><i
                            class="fa-regular fa-trash-can"></i> Delete</button>
                </div>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td class="border-0" colspan="4" style="text-align: right;">
                Need To Add New Row?
            </td>
            <td class="border-0">
                <div class="d-flex justify-content-end">
                    <button id="add-row" type="button" class="btn btn-primary rounded-circle">+</button>
                </div>
            </td>
        </tr>
    </tfoot>
</table>

I want to target the first select box which is in the first row and to get its all option childrens to a string variable with all the markup to concatenate into a html template mentioned below. All the Ids, name=, … are generated by ASP MVC. That is why is looks complex.

HTML TEMPLATE

                   `<tr>
                        <th scope="row">1</th>
                        <td>
                            <select class="form-select" data-val="true" data-val-required="The ItemCatId field is required." id="PolyCombItemCatBridgeList_`+ row_count +`__ItemCatId" name="PolyCombItemCatBridgeList[` + row_count + `].ItemCatId">
                                `
                                + select_items_list +
                                `
                            </select>
                            <b><span class="text-danger" for=""></span></b>
                        </td>
                        <td>
                            <input type="text" class="form-control" placeholder="Percentage" data-val="true" data-val-number="The field Percentage must be a number." data-val-range="Percentage is between 0% and 100%" data-val-range-max="100" data-val-range-min="0" data-val-required="The Percentage field is required." id="PolyCombItemCatBridgeList_`+ row_count + `__Percentage" name="PolyCombItemCatBridgeList[` + row_count + `].Percentage" value="">
                            <b><span class="text-danger" for="BagType.Isactive"></span></b>
                        </td>
                        <td class="align-bottom">
                            <div>
                                <button type="button" class="btn btn-danger rounded del-this-row"><i class="fa-regular fa-trash-can"></i> Delete</button>
                            </div>
                        </td>
                    </tr>`

Here row_count, select_items_list are string variables

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to @epascarello, I understood the problem. I was mixing jQuery with JavaScript. Using only the jQuery Traversing Methods was solved the problem. As the following.

    var optionsHTMLCollection = $('#table-body').find('select').prop('innerHTML');

    For update 1

    var select_items_list = $('#table-body').find('select').prop('innerHTML'); // As per the update 1

  2. 0

    Consider the following.

    $(function() {
  $(".table .form-select").each(function(i, sel) {
    console.log($(sel).attr("id"));
    $("option", sel).each(function(j, el) {
      console.log($(el).prop("outerHTML"));
    });
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-dark table-hover">
  <thead class="align-middle">
    <tr>
      <th scope="col">Seq No</th>
      <th scope="col">Item Category</th>
      <th scope="col">Percentage (%)</th>
      <th scope="col">Item Name</th>
      <th class="text-center" scope="col">Actions</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr>
      <th scope="row">1</th>
      <td>
        <select class="form-select" data-val="true" data-val-required="The ItemCatId field is required." id="PolyCombItemCatBridgeList_0__ItemCatId" name="PolyCombItemCatBridgeList[0].ItemCatId">
          <option selected>-- select product finishing type --</option>
          <option value="1">HIGH DENSITY POLYETHYLENE</option>
          <option value="2">LINEAR LOW DENSITY POLYETHYLENE</option>
        </select>
        <b><span class="text-danger" for=""></span></b>
      </td>
      <td>
        <input type="text" class="form-control" placeholder="Percentage" data-val="true" data-val-number="The field Percentage must be a number." data-val-range="Percentage is between 0% and 100%" data-val-range-max="100" data-val-range-min="0" data-val-required="The Percentage field is required."
          id="PolyCombItemCatBridgeList_0__Percentage" name="PolyCombItemCatBridgeList[0].Percentage" value="">
        <b><span class="text-danger" for="BagType.Isactive"></span></b>
      </td>
      <td class="align-bottom">
        <div>
          <button type="button" class="btn btn-danger rounded del-this-row"><i
                            class="fa-regular fa-trash-can"></i> Delete</button>
        </div>
      </td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td>
        <select class="form-select" data-val="true" data-val-required="The ItemCatId field is required." id="PolyCombItemCatBridgeList_1__ItemCatId" name="PolyCombItemCatBridgeList[1].ItemCatId">
          <option selected>-- select product finishing type --</option>
          <option value="1">HIGH DENSITY POLYETHYLENE</option>
          <option value="2">LINEAR LOW DENSITY POLYETHYLENE</option>
        </select>
        <b><span class="text-danger" for=""></span></b>
      </td>
      <td>
        <input type="text" class="form-control" placeholder="Percentage" data-val="true" data-val-number="The field Percentage must be a number." data-val-range="Percentage is between 0% and 100%" data-val-range-max="100" data-val-range-min="0" data-val-required="The Percentage field is required."
          id="PolyCombItemCatBridgeList_1__Percentage" name="PolyCombItemCatBridgeList[1].Percentage" value="">
        <b><span class="text-danger" for="BagType.Isactive"></span></b>
      </td>
      <td class="align-bottom">
        <div>
          <button type="button" class="btn btn-danger rounded del-this-row"><i
                            class="fa-regular fa-trash-can"></i> Delete</button>
        </div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td class="border-0" colspan="4" style="text-align: right;">
        Need To Add New Row?
      </td>
      <td class="border-0">
        <div class="d-flex justify-content-end">
          <button id="add-row" type="button" class="btn btn-primary rounded-circle">+</button>
        </div>
      </td>
    </tr>
  </tfoot>
</table>

    As you can see, this uses the Selector to find the select element. It then uses Each to iterate each element of that selector. I perform another loop of all child option elements of that select to gather the HTML for each.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search