从 html table 中的每一行提取属性

Question

我在 HTML 中有以下 table，我想以编程方式从 table 中的每一行中提取 call_id 属性。

我正在插入代码和编辑器中的简化视图，因此您可以看到我感兴趣的内容：

简化视图：

我执行以下调用以获取整个 table，然后想使用此对象从以下位置检索数据：

var recordingTable = parent.recordingsFrame.document.getElementById("recordingTable");

对于此解决方案，我的目标是纯粹 javascript，而不是使用外部库的帮助。

<table cellspacing="1" id="recordingTable"><input id="" name="" type="hidden" value="recordingTable">
    <thead class="callView">
        <tr>
            <th>
                <translate>STATE</translate>
            </th>
            <th>
                <translate>Call ID</translate>
            </th>
            <th>
                <translate>Text Type</translate>
            </th>
            <th>
                <translate>Start time</translate>
            </th>
            <th>
                <translate>Call duration</translate>
            </th>
            <th>
                <translate>Radio/Unit ID</translate>
            </th>
            <th>
                <translate>Participant name</translate>
            </th>
            <th>
                <translate>Tag</translate>
            </th>
            <th>
                <translate>Note</translate>
            </th>
            <th>
                <translate></translate>
            </th>
        </tr>
    </thead>
    <tbody class="callView">
        <tr active="0" archivecount="0" callprovidertype="16" call_id="5" callsempty="false" deleted="false" flags="1" haslink="false" onlinecount="1" screenreccount="0" screensempty="true" issms="false" istext="true" style="background-color: rgb(208, 230, 248);">
            <td class="spannedCell" style="color: rgb(18, 159, 221);">
                <div id="pics_scrollPanel">
                    <table cellspacing="0" id="pics"><input id="" name="" type="hidden" value="pics">
                        <thead></thead>
                        <tbody>
                            <tr>
                                <td class="spannedCell"><i class="fa fa-envelope-o iTags" id="smsCallIcon" title="message"></i></td>
                                <td class="tableColumn"></td>
                                <td class="tableColumn"></td>
                                <td class="spannedCell"><span class="icon-dvd-archive-restored spanTags" id="restoredCallIcon" title="restored"></span></td>
                                <td class="tableColumn"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
            <td class="spannedCell" style="color: rgb(18, 159, 221);"><span>5</span></td>
            <td class="spannedCell" style="color: rgb(18, 159, 221);"><span></span></td>
            <td class="spannedCell" style="color: rgb(18, 159, 221);"><span>2013-08-06 19:11:24</span></td>
            <td class="spannedCell" style="color: rgb(18, 159, 221);"><span>00:02:00</span></td>
            <td class="spannedCell" style="color: rgb(18, 159, 221);">
                <div>
                    <div>5010</div>
                    <div>5010 (Caller)</div>
                </div>
            </td>
            <td class="spannedCell" style="color: rgb(18, 159, 221);">
                <div>
                    <div>Samsung</div>
                    <div>Samsung</div>
                </div>
            </td>
            <td class="spannedCell" style="color: rgb(18, 159, 221);"><span></span></td>
            <td class="spannedCell" style="color: rgb(18, 159, 221);">
                <div title="00 D4 14 86 7E CA 3B 7D 61 20">00 D4 14 8...</div>
            </td>
            <td class="tableColumn" style="color: rgb(18, 159, 221);"></td>
        </tr>
        <tr active="0" archivecount="0" callprovidertype="16" call_id="4" callsempty="false" deleted="false" flags="1" haslink="false" onlinecount="2" screenreccount="0" screensempty="true" issms="false" istext="true">
            <td class="spannedCell">
                <div id="pics_scrollPanel">
                    <table cellspacing="0" id="pics"><input id="" name="" type="hidden" value="pics">
                        <thead></thead>
                        <tbody>
                            <tr>
                                <td class="spannedCell"><i class="fa fa-envelope-o iTags" id="smsCallIcon" title="message"></i></td>
                                <td class="tableColumn"></td>
                                <td class="tableColumn"></td>
                                <td class="spannedCell"><span class="icon-dvd-archive-restored spanTags" id="restoredCallIcon" title="restored"></span></td>
                                <td class="tableColumn"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
            <td class="spannedCell"><span>4</span></td>
            <td class="spannedCell"><span></span></td>
            <td class="spannedCell"><span>2013-08-06 19:11:17</span></td>
            <td class="spannedCell"><span>00:02:00</span></td>
            <td class="spannedCell">
                <div>
                    <div>8882103</div>
                    <div>5006 (Caller)</div>
                </div>
            </td>
            <td class="spannedCell">
                <div>
                    <div>Samsung</div>
                    <div>Samsung</div>
                </div>
            </td>
            <td class="spannedCell"><span></span></td>
            <td class="spannedCell">
                <div title="00 D4 0E 96 7E DF 9E FC 80 F0">00 D4 0E 9...</div>
            </td>
            <td class="tableColumn"></td>
        </tr>
        <tr active="0" archivecount="0" callprovidertype="16" call_id="3" callsempty="false" deleted="false" flags="1" haslink="false" onlinecount="1" screenreccount="0" screensempty="true" issms="false" istext="true">
            <td class="spannedCell">
                <div id="pics_scrollPanel">
                    <table cellspacing="0" id="pics"><input id="" name="" type="hidden" value="pics">
                        <thead></thead>
                        <tbody>
                            <tr>
                                <td class="spannedCell"><i class="fa fa-envelope-o iTags" id="smsCallIcon" title="message"></i></td>
                                <td class="tableColumn"></td>
                                <td class="tableColumn"></td>
                                <td class="spannedCell"><span class="icon-dvd-archive-restored spanTags" id="restoredCallIcon" title="restored"></span></td>
                                <td class="tableColumn"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
            <td class="spannedCell"><span>3</span></td>
            <td class="spannedCell"><span></span></td>
            <td class="spannedCell"><span>2013-08-06 19:11:11</span></td>
            <td class="spannedCell"><span>00:02:00</span></td>
            <td class="spannedCell">
                <div>
                    <div>5010</div>
                    <div>5010 (Caller)</div>
                </div>
            </td>
            <td class="spannedCell">
                <div>
                    <div>Samsung</div>
                    <div>Samsung</div>
                </div>
            </td>
            <td class="spannedCell"><span></span></td>
            <td class="spannedCell">
                <div title="00 D3 F1 16 7E 3D D5 87 80 60">00 D3 F1 1...</div>
            </td>
            <td class="tableColumn"></td>
        </tr>
        <tr active="0" archivecount="0" callprovidertype="16" call_id="2" callsempty="false" deleted="false" flags="1" haslink="false" onlinecount="1" screenreccount="0" screensempty="true" issms="false" istext="true">
            <td class="spannedCell">
                <div id="pics_scrollPanel">
                    <table cellspacing="0" id="pics"><input id="" name="" type="hidden" value="pics">
                        <thead></thead>
                        <tbody>
                            <tr>
                                <td class="spannedCell"><i class="fa fa-envelope-o iTags" id="smsCallIcon" title="message"></i></td>
                                <td class="tableColumn"></td>
                                <td class="tableColumn"></td>
                                <td class="spannedCell"><span class="icon-dvd-archive-restored spanTags" id="restoredCallIcon" title="restored"></span></td>
                                <td class="tableColumn"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
            <td class="spannedCell"><span>2</span></td>
            <td class="spannedCell"><span></span></td>
            <td class="spannedCell"><span>2013-08-06 19:08:47</span></td>
            <td class="spannedCell"><span>00:02:00</span></td>
            <td class="spannedCell">
                <div>
                    <div>8882107</div>
                    <div>5014 (Caller)</div>
                </div>
            </td>
            <td class="spannedCell">
                <div>
                    <div>Samsung</div>
                    <div>Samsung</div>
                </div>
            </td>
            <td class="spannedCell"><span></span></td>
            <td class="spannedCell">
                <div title="20 D4 12 BE 7E 93 E9 4C E1 20">20 D4 12 B...</div>
            </td>
            <td class="tableColumn"></td>
        </tr>
        <tr active="0" archivecount="0" callprovidertype="16" call_id="1" callsempty="false" deleted="false" flags="1" haslink="false" onlinecount="1" screenreccount="0" screensempty="true" issms="false" istext="true">
            <td class="spannedCell">
                <div id="pics_scrollPanel">
                    <table cellspacing="0" id="pics"><input id="" name="" type="hidden" value="pics">
                        <thead></thead>
                        <tbody>
                            <tr>
                                <td class="spannedCell"><i class="fa fa-envelope-o iTags" id="smsCallIcon" title="message"></i></td>
                                <td class="tableColumn"></td>
                                <td class="tableColumn"></td>
                                <td class="spannedCell"><span class="icon-dvd-archive-restored spanTags" id="restoredCallIcon" title="restored"></span></td>
                                <td class="tableColumn"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
            <td class="spannedCell"><span>1</span></td>
            <td class="spannedCell"><span></span></td>
            <td class="spannedCell"><span>2013-08-06 19:08:47</span></td>
            <td class="spannedCell"><span>00:02:00</span></td>
            <td class="spannedCell">
                <div>
                    <div>8882105</div>
                    <div>5010 (Caller)</div>
                </div>
            </td>
            <td class="spannedCell">
                <div>
                    <div>Samsung</div>
                    <div>Samsung</div>
                </div>
            </td>
            <td class="spannedCell"><span></span></td>
            <td class="spannedCell">
                <div title="20 D4 08 66 7E 82 A9 4C E1 20">20 D4 08 6...</div>
            </td>
            <td class="tableColumn"></td>
        </tr>
    </tbody>
</table>

Answer 1

这是一个简短的片段，其中包含 table 中的所有 call_id 值：

var rows = document.querySelectorAll('[call_id]')

var callIds = Array.prototype.map.call(rows, function(tr){
  return tr.getAttribute('call_id')
})

console.log(callIds)

代码解释：

document.querySelectorAll() 查询 DOM 匹配选择器
我使用的选择器是 [call_id]，它会获取属性匹配 call_id="<any>"
由于document.querySelectorAll()的返回值不是普通的数组，有map()方法，我用Array的原型调用class方法map，传入结果为this 值
map() returns 一个带有任何回调的新数组 returns，在本例中，call_id

从 html table 中的每一行提取属性

extract attribute from each row in an html table

html

javascript

extract