I want give every element in a table a generated id. See this html table below:

<table>
<tbody>
    <tr>
        <td>A1</td>
        <td>A2</td>
        <td>
            <a href="#">A3</a>
        </td>
    </tr>
    <tr>
        <td>B1</td>
        <td>B2</td>
        <td>
            <a href="#">B3</a>
        </td>
    </tr>
    <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
    </tr>
</tbody>
</table>

I want to give each element an id using breadth-first traversal. So, the result bees like this:

<table>
<tbody id="0">
    <tr id="1">
        <td id="4">A1</td>
        <td id="5">A2</td>
        <td id="6">
            <a href="#" id="13">A3</a>
        </td>
    </tr>
    <tr id="2">
        <td id="7">B1</td>
        <td id="8">B2</td>
        <td id="9">
            <a href="#" id="14">B3</a>
        </td>
    </tr>
    <tr id="3">
        <td id="10">C1</td>
        <td id="11">C2</td>
        <td id="12">C3</td>
    </tr>
</tbody>
</table>

I have tried the each() function in jQuery to generate the id for every element in that table, but the traversal algorithm used in each() function is pre order traversal.

Can anyone suggest me the Javascript code to do this?

I want give every element in a table a generated id. See this html table below:

<table>
<tbody>
    <tr>
        <td>A1</td>
        <td>A2</td>
        <td>
            <a href="#">A3</a>
        </td>
    </tr>
    <tr>
        <td>B1</td>
        <td>B2</td>
        <td>
            <a href="#">B3</a>
        </td>
    </tr>
    <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
    </tr>
</tbody>
</table>

I want to give each element an id using breadth-first traversal. So, the result bees like this:

<table>
<tbody id="0">
    <tr id="1">
        <td id="4">A1</td>
        <td id="5">A2</td>
        <td id="6">
            <a href="#" id="13">A3</a>
        </td>
    </tr>
    <tr id="2">
        <td id="7">B1</td>
        <td id="8">B2</td>
        <td id="9">
            <a href="#" id="14">B3</a>
        </td>
    </tr>
    <tr id="3">
        <td id="10">C1</td>
        <td id="11">C2</td>
        <td id="12">C3</td>
    </tr>
</tbody>
</table>

I have tried the each() function in jQuery to generate the id for every element in that table, but the traversal algorithm used in each() function is pre order traversal.

Can anyone suggest me the Javascript code to do this?

• javascript
• jquery
• html-table

Share Improve this question Follow edited Aug 25, 2018 at 21:42 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked May 13, 2013 at 16:15 hindarwanhindarwan 17922 gold badges33 silver badges88 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

var n = 0
var level = $("table");

while (level.children().length) {
    level = level.children().each(function(_, el) {
        el.id = n++;
    })
}

DEMO: http://jsfiddle/J5QMK/

---

If you want to avoid the redundant .children() call, you can do this:

while ((level = level.children()).length) {
    level.each(function (_, el) {
        el.id = n++;
    })
}

DEMO: http://jsfiddle/J5QMK/1/

A mon way to do a breadth-first search is to use a queue as follows:

jQuery(document).ready(function () {
    var ctr = 0;
    var queue = [];

    queue.push(jQuery("table").children()); // enqueue
    while (queue.length > 0) {
        var children = queue.shift(); // dequeue
        children.each(function (ix, elem) {
            queue.push(  // enqueue
                jQuery(elem).attr("id", ctr++).children();
            );
            console.log(elem.tagName + ": " + elem.id);
        });
    }
});