Как заменить текст в столбце (внутри таблицы) на Javascript без какого-либо идентификатора

Question

Приведенный ниже код показывает визуализированный HTML-код (из скомпилированного кода ASP .Net).Я не смог бы внести в него какие-либо изменения, включая добавление новых атрибутов, таких как ID.

Я все еще мог бы что-то сделать с Javascript, но, поскольку нет уникального идентификатора для столбца, я не смог заменить текст подчеркивания " _ __ _ __ _ __ _ __"с другим текстом.

План состоит в том, чтобы заменить подчеркивание в столбце 3 для каждой строки каким-либо другим текстом.Есть ли способ идентифицировать Столбец 3 с помощью Javascript?

Спасибо.

    <table width='100%'>
        <tr>
            <td align="left" valign="top" class='clsReadOnly'>Row 1
            </td>
            <td align="left" valign="top" class='clsReadOnly'>
                abc
            </td>
            <td align="left" valign="top" class='clsReadOnly'>
                __________________________
            </td>
        </tr>
        <tr>
            <td align="left" valign="top" class='clsReadOnly'>Row 2
            </td>
            <td align="left" valign="top" class='clsReadOnly'>
                def
            </td>
            <td align="left" valign="top" class='clsReadOnly'>
                __________________________
            </td>
        </tr>
        <tr>
            <td align="left" valign="top" class='clsReadOnly'>Row 3
            </td>
            <td align="left" valign="top" class='clsReadOnly'>
                ghi
            </td>
            <td align="left" valign="top" class='clsReadOnly'>
                __________________________
            </td>
        </tr>
    </table>

Answer 1

Если это единственная таблица на странице, вы можете сделать это с помощью jQuery:

$('table')
    .children('tr')
    .each(function() {
        $(this).children('td:last').html('<p>A Paragraph of Text</p>');
    });

Answer 2

getElementsByClassName () является HTML5 и в настоящее время не поддерживается в IE. Вот jsfiddle для решения http://jsfiddle.net/V38MF/2/ без jQuery, необходимого

var myTable = document.getElements('td');
for(var i=0; i<myTable.length; i++){
    if((i+1)%3 == 0)
        console.log(myTable[i].innerHTML);
}

Answer 3

Это зависит от того, чего вы пытаетесь достичь. Если так будет выглядеть ваша таблица всегда, вы можете сделать следующее:

var cells = document.getElementsByClassName('clsReadOnly');

cells[2].innerHTML = "Row1 Column3";
cells[5].innerHTML = "Row2 Column3";
cells[8].innerHTML = "Row3 Column3";

Если вы не знаете, сколько столбцов вы начнете, вам придется сделать это:

var rows = document.getElementsByTagName('tr');

for (var i=0; i<rows.length; i++) {
    var cells = rows[i].getElementsByTagName('td');

    cells[2].innerHTML = 'Row'+(i+1)+' Column3';
}

jQuery сделает это намного проще, так как вы можете выбирать по тегам, по родителям и т. Д. Конечно, вы можете делать все это в простом JavaScript, но это займет намного больше работы.

http://jsfiddle.net/bShZa/