Как получить ширину ячейки заголовка таблицы в JavaScript через DOM? - PullRequest
Новая
       13

Как получить ширину ячейки заголовка таблицы в JavaScript через DOM?

0 голосов
/ 22 марта 2019

У меня есть доступ к этому узлу DOM в temp1.$el.

А вот содержимое, которое имеет вышеуказанная переменная: 

<table id="__BVID__730" aria-busy="false" aria-colcount="10" aria-rowcount="14" class="table b-table table-striped table-hover">
    <thead class="thead-class-hidden">
        <tr>
            <th aria-colindex="1" class="">
                <div style="white-space: nowrap;">
                    Header1 Name
                </div>
            </th>
            <th aria-colindex="2" class="">
                <div style="white-space: nowrap;">
                    Header2 Name
                </div>
            </th>
        </tr>
    </thead>
    <tbody class="">
        <tr class="">
            <td aria-colindex="1" class="">
                <div style="white-space: nowrap;">
                    Row1 Column1 Value
                </div>
            </td>
            <td aria-colindex="2" class="">
                <div style="white-space: nowrap;">
                    Row1 Column2 Value
                </div>
            </td>
        </tr>
    </tbody>
</table>

Я работаю в простом JavaScript, и мне нужно получить ширину элемента: 

 table thead tr th (child-1)
 table thead tr th (child-2)

Я пробовал много вещей, таких как: 

temp1.$el.tHead.firstElementChild.children[0].offsetWidth
temp1.$el.tHead.firstElementChild.children[0].clientWidth    
temp1.$el.tHead.firstElementChild.children[0].firstElementChild.offsetWidth
temp1.$el.tHead.firstElementChild.children[0].firstElementChild.clientWidth

Но все они не работают. Ширина table thead tr th зависит от фактического содержимого внутри них, и мне нужно взять ширину и позже, чтобы применить их к другой таблице.

Мне удалось передать их в переменную temp1.$el, но отсюда я не смог добиться нужной ширины.

Ответы [ 3 ]

0 голосов
/ 22 марта 2019

Что такое $ el? Это похоже на jQuery , а не на ваниль js.

На основе вашего кода. 

// Table
// Or querySelector('table') if you have only one
const table = document.getElementById("__BVID__730"); 
console.log(table.clientWidth);

// Thead & Tbody
const thead = table.querySelector("thead");
const tbody = table.querySelector("tbody");
console.log(thead.clientWidth);
console.log(tbody.clientWidth);

// Tr th
const theadColumns = thead.querySelectorAll("tr th");
if (theadColumns) {
  console.log(theadColumns[0]);
  console.log(theadColumns[1]);

  // OR
  theadColumns.forEach(column => console.log(column.clientWidth));
}
0 голосов
/ 22 марта 2019

Вот рабочая демонстрация для получения ширины первого th (используется jQuery 1.8.3):

http://jsfiddle.net/7dg5bvou/

Также это может помочь вам решить вашу проблему: сначала включите библиотеку jQueryв головной части вашего HTML. 

temp1.$el.find("table[id='__BVID__730']").find(".thead-class-hidden").children("tr:first-child").children("th:first-child").width();

Также вы можете использовать "eq", чтобы найти соответствующий элемент, например: td:eq(1)

0 голосов
/ 22 марта 2019

Вы можете сделать это, используя свойство ParentNode children .

Свойство ParentNode children - это свойство только для чтения, которое возвращает активную HTMLCollection , которая содержит все дочерние элементы из узел, на котором он был назван. 

var element = document.getElementById('__BVID__730');
console.log(element.tHead.children[0].children[0].offsetWidth)
<table id="__BVID__730" aria-busy="false" aria-colcount="10" aria-rowcount="14" class="table b-table table-striped table-hover">
    <thead class="thead-class-hidden">
        <tr>
            <th aria-colindex="1" class="">
                <div style="white-space: nowrap;">
                    Header1 Name
                </div>
            </th>
            <th aria-colindex="2" class="">
                <div style="white-space: nowrap;">
                    Header2 Name
                </div>
            </th>
        </tr>
    </thead>
    <tbody class="">
        <tr class="">
            <td aria-colindex="1" class="">
                <div style="white-space: nowrap;">
                    Row1 Column1 Value
                </div>
            </td>
            <td aria-colindex="2" class="">
                <div style="white-space: nowrap;">
                    Row1 Column2 Value
                </div>
            </td>
        </tr>
    </tbody>
</table>
...