從td元素獲取src

Question

我有以下元素：

<td>
<div class="myClass" id="grid_ctl00_ctl04_f18036c">
    <ul class="rtUL rtLines">
        <li class="rtLI rtFirst rtLast">
            <div class="rtMid">
                <div style="color: rgb(0, 0, 0);" data-valueslistvalueid="69118">
                    <img title="Medium" alt="Medium" src="/ball_yellow.gif">
                </div>
            </div>
        </li>
    </ul>
</div>
</td>

我想獲取img的src屬性文本 ，我有表行col。

for (var i = 1, row; row = table.rows[i]; i++) {
     var col = able.rows[i][0];
}

*我只能使用JaveScript。

謝謝。

Answer 1

如果變量col正在選擇正確的列，請嘗試：

var src = col.querySelector('img').getAttribute('src');

Answer 2

在單元格中獲取img元素，並根據您的要求從元素對象獲取src屬性或屬性。

// assumes `table` refers to the DOM object of table

for (var i = 1, row; i < table.rows.length; i++) {
     // get src property
     var src = table.rows[i].cells[0].querySelector('img').src;
     // or get attribute value
     var src1 = table.rows[i].cells[0].querySelector('img').getAttribute('src');
}

 var table = document.getElementById('table'); for (var i = 1, row; i < table.rows.length; i++) { // get src property var src = table.rows[i].cells[0].querySelector('img').src; // or get attribute value var src1 = table.rows[i].cells[0].querySelector('img').getAttribute('src'); console.log(src); console.log(src1); } 

 <table id="table"> <tr> <td> <div class="myClass" id="grid_ctl00_ctl04_f18036c"> <ul class="rtUL rtLines"> <li class="rtLI rtFirst rtLast"> <div class="rtMid"> <div style="color: rgb(0, 0, 0);" data-valueslistvalueid="69118"> <img title="Medium" alt="Medium" src="/ball_yellow.gif"> </div> </div> </li> </ul> </div> </td> </tr> <tr> <td> <div class="myClass" id="grid_ctl00_ctl04_f18036c"> <ul class="rtUL rtLines"> <li class="rtLI rtFirst rtLast"> <div class="rtMid"> <div style="color: rgb(0, 0, 0);" data-valueslistvalueid="69118"> <img title="Medium" alt="Medium" src="/ball_yellow.gif"> </div> </div> </li> </ul> </div> </td> </tr> <tr> <td> <div class="myClass" id="grid_ctl00_ctl04_f18036c"> <ul class="rtUL rtLines"> <li class="rtLI rtFirst rtLast"> <div class="rtMid"> <div style="color: rgb(0, 0, 0);" data-valueslistvalueid="69118"> <img title="Medium" alt="Medium" src="/ball_yellow.gif"> </div> </div> </li> </ul> </div> </td> </tr> <tr> <td> <div class="myClass" id="grid_ctl00_ctl04_f18036c"> <ul class="rtUL rtLines"> <li class="rtLI rtFirst rtLast"> <div class="rtMid"> <div style="color: rgb(0, 0, 0);" data-valueslistvalueid="69118"> <img title="Medium" alt="Medium" src="/ball_yellow.gif"> </div> </div> </li> </ul> </div> </td> </tr> <tr> <td> <div class="myClass" id="grid_ctl00_ctl04_f18036c"> <ul class="rtUL rtLines"> <li class="rtLI rtFirst rtLast"> <div class="rtMid"> <div style="color: rgb(0, 0, 0);" data-valueslistvalueid="69118"> <img title="Medium" alt="Medium" src="/ball_yellow.gif"> </div> </div> </li> </ul> </div> </td> </tr> </table>