Which Dom Elements Can Be Child of Tr

Which DOM elements can be child of tr?

W3C specify this stuff. For tr, you can find it here. Basically, only th and td elements can be direct contents of tr.

If you want other stuff inside your table, it has to go inside the td or th elements. For example, td can contain flow elements, including div.

How Can I get element from tdtd/ (td tag's child) in JavaScript DOM

The may be on the first 'line'...

However, the Document Object Model that HTML represents doesn't care about line breaks, or additional white space at all. Rather, it's about where in the tree it lies. The <span> is the second child to the <td>, (index of 1), but I don't know why it's the one you're trying to get to. Is it the <span> tag itself? or the second child element?

If its the placement of the child within the td, you can retrieve all the children in an array:

td.getElementsByTagName("*")

and then you can pull out the second child (again, index of [1]), and (optionally) get the content directly...

td.getElementsByTagName("*")[1].textContent

If it's the fact that it's a <span> that brings you there...

td.getElementsByTagName("span")[0].textContent

If you need to do it by the id="cate_name" attribute, the getElementById is available on the document node. This is because properly formed HTML should not re-use an id:

document.getElementById("cate_name").textContent

Also, this in the console of Chrome. Other browsers use slightly different JavaScript calls, such as innerText. Does the page already jQuery imported? If so, all the inconsistencies between browsers can be avoided. You can check for it with...

$.fn.jquery

This will get the jQuery version number.
This page, Stack Overflow, currently responds with '1.12.4'

With jQuery you can just use CSS-style selectors to find your node in the DOM:

$("tr td:nth-child(2) span#cate_name").innerText

.. or just:

$("#cate_name").innerText

So I was mistaken, td.getElementsByTagName("*") (and the asterisk in the quotes is vital) doesn't return an array, but rather a specialized HtmlCollection object. We can convert it to a true js array, and manipulate it like this:

var arr = [].slice.call(td.getElementsByTagName("*"));
var br = arr.find(x => x.localName == "br");  // find first line break
var firstRow = arr.slice(0, arr.IndexOf(br)) // first 'row' as array segment
var firstRowText = firstRow.map(x => x.innerText).Join() //if you want the whole first row text 

Getting Child element of TR Table

You can try with querySelectorAll() like the following way:

var text = document.querySelectorAll('#support > td')[2].textContent;console.log(text);

<table>  <tr id="support">    <td></td>    <td></td>    <td>Yes</td>  </tr></table>

table child elements usage in shadow dom

As stated in the comment this is currently not possible according to Custom Elements spec v1.

The spec limits tags of <table> to a set of <tbody>, <thead> and so on plus <script> and <template>.

Browser vendors are reluctant to incorporating changes in their HTML parser https://github.com/WICG/webcomponents/issues/59.

Guess the only solution for now is to use a mesh of divs with a bunch of aria-* attributes.

What's the parentNode of a tr ？

In this case, the parent element is a <tbody> (the start and end tags for which are optional).

See the HTML 5 tree construction rules:

8.2.5.4.9 The "in table" insertion mode

…

A start tag whose tag name is one of: "td", "th", "tr"

Clear the stack back to a table context. (See below.)

Insert an HTML element for a "tbody" start tag token with no attributes, then switch the insertion mode to "in table body".

Reprocess the current token.

remove a especific tr child of a table

First of all, It's not oneclick, but onclick.

<!-- Wrong: oneclick -->
<td data-line_number="1" oneclick="remove_line(this)" class="text_center" style="color:red">x</td>

<!-- Fixed: onclick -->
<td data-line_number="1" onclick="remove_line(this)" class="text_center" style="color:red">x</td>

---

That said, the event (e) thats passed to the function can be used to get the desired output.

e.parentNode.remove()

Will get the paret node (tr) of the cell (td), and remove it as you can test here:

function remove_line(e) {
  e.parentNode.remove()
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row  margin_top_30">
    <div class="col-md-6">
        <table class="common_table" id="documento_detalhe" class="display" style="width:100%">
            <thead>
                <tr>
                    <th style="width: 50px" class="text_center">Linha</th>
                    <th style="" class="text_center">Produto</th>
                    <th style="width: 80px;" class="text_center">Quantidade</th>
                    <th style="width: 80px;margin-left: 10px" class="text_center"></th>

                </tr>
            </thead>
            <tbody class="text_center" id="tbody">
                <tr class="text_center">
                    <td class="text_center">1</td>
                    <td class="text_center">sdfsfrewf</td>
                    <td class="text_center">32</td>
                    <td data-line_number="1" onclick="remove_line(this)" class="text_center" style="color:red">x</td>
                </tr>
                <tr class="text_center">
                    <td class="text_center">2</td>
                    <td class="text_center">sdfsfrewf</td>
                    <td class="text_center">32</td>
                    <td data-line_number="2" onclick="remove_line(this)"  class="text_center" style="color:red">x</td>
                </tr>
                <tr class="text_center">
                    <td class="text_center">3</td>
                    <td class="text_center">sdfsfrewf</td>
                    <td class="text_center">32</td>
                    <td data-line_number="3" onclick="remove_line(this)"  class="text_center" style="color:red">x</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

---

Related Topics