LINUX.ORG.RU
Форум — Web-development  

Разбор html таблицы

 


0

1

В чем ошибка, код не работает. Хочу вывести по строкам(их 2), а для каждой строки вывести столбцы

<html>
<body>
<table>
    <tr id="id01" class="BalanceRow                                                                                                                                                                                      clickedRow" style="text-align:left;display:table-row;" clickedrow="true">
        <td class="BalNames0"><nobr><a style="text-decoration:none;color:black;cursor:pointer;" onclick="javascript:NewHideRows(['0101','0102','0103','010101','010102','010103','010104','010105','010201','010202','010203','010204','010205','010206','010207','010208','010301','010302','010303','010304','010305','010306','010307','010308','010309','010310','010311','010312','010313','010314','010315','010316','010317','010318','010319','01010101','01010102','01010103','01010104','01010201','01010202','01020101','01020102','01020103','01020105','01020106','01020107','01020201','01020202','01020203','01020204','01020205','01020206','01020207','01020208','01020209','01020210','01020301','01020302','01020303','01020304','01020305','01020306','01020307','01020401','01020402','01020403','01020404','01020405','01020406','01020407','01020501','01020506','01020507','01020508','01020509','01020801','01020802','01020803','01030201','01030202','01030203','01030204','01031401','01031402','0101010101','0101010102','0101010103','0101010104','0101010105','0101010106','0101010107','0102010201','0102010202','0102010203','0102010301','0102010302','0102010303','0102010501','0102020101','0102020102','0102020103','0102020104','0102020105','0102020106','0102020107','0102020108','0102020109','0102020110','0102020111','0102020201','0102020202','0102020203','0102020204','0102020205','0102020206','0102020207','0102020208','0102020301','0102020302','0102020303','0102020304','0102020305','0102030101','0102030102','0102030103','0102030104','0102030105','0102030201','0102030202','0102030203','0102030204','0102030205','0102030301','0102030302','0102030303','0102030304','0102030305','0102030401','0102030402','0102030403','0102030501','0102030502','0102030503','0102050101','0102050102','0102050103','0102050104','0102050105','0102050106','0102050601','0102050602'], 'picId01');"><img style="position:relative;top:-2px;" id="picId01" border="0" src="/img/TreeMinus.gif"> 
 
        АКТИВ</a></nobr></td>
        <td class="BalData0"><nobr><a id="01;1481;2018-01-01;" title="Нажмите для детализации по балансовым счетам 101 формы" href="#dialog" name="modal" data-toggle="modal" data-target=".balance-details-modal" style="text-decoration:none;color:black;">23 226 504 149</a></nobr></td>     
        <td class="BalData0"><nobr><a id="01;1481;2018-02-01;" title="Нажмите для детализации по балансовым счетам 101 формы" href="#dialog" name="modal" data-toggle="modal" data-target=".balance-details-modal" style="text-decoration:none;color:black;">22 883 569 886</a></nobr></td> 
        <td style="width:120px;border-left-style:solid;border-left-width:1px;border-left-color:#bbbbbb;" class="BalData0R"><nobr>-342 934 263</nobr></td>
        <td style="width:70px;" class="BalData0R"><nobr>-1,5%</nobr></td>
        <td><a style="cursor:pointer;" onclick="window.open('/pie_chart.php?type=pie&amp;bank=1481&amp;subtype=assets&amp;d1=2018-01-01&amp;d2=2018-02-01','График','width=850,height=500,scrollbars=yes')"><img src="/img/pie-chart-small.png" border="0"></a></td>
    </tr>
    
    
    <tr id="id0101" class="BalanceRow                                                                                                                    " style="text-align: left; display: table-row;">
<td class="BalNames1"><nobr><a style="text-decoration:none;color:black;cursor:pointer;" onclick="javascript:NewHideRows(['010101','010102','010103','010104','010105','01010101','01010102','01010103','01010104','01010201','01010202','0101010101','0101010102','0101010103','0101010104','0101010105','0101010106','0101010107'], 'picId0101');"><img style="position:relative;top:-2px;" id="picId0101" border="0" src="/img/TreeMinus.gif"> 
 
        Высоколиквидные активы</a></nobr></td>
        <td class="BalData1"><nobr><a id="0101;1481;2018-01-01;" title="Нажмите для детализации по балансовым счетам 101 формы" href="#dialog" name="modal" data-toggle="modal" data-target=".balance-details-modal" style="text-decoration:none;color:black;">1 727 507 996</a></nobr></td>
        
                
        <td class="BalData1"><nobr><a id="0101;1481;2018-02-01;" title="Нажмите для детализации по балансовым счетам 101 формы" href="#dialog" name="modal" data-toggle="modal" data-target=".balance-details-modal" style="text-decoration:none;color:black;">1 513 795 738</a></nobr></td>
        
                
                        <td style="width:120px;border-left-style:solid;border-left-width:1px;border-left-color:#bbbbbb;" class="BalData1R"><nobr>-213 712 258</nobr></td>
        <td style="width:70px;" class="BalData1R"><nobr>-12,4%</nobr></td>
        
                    <td><a style="cursor:pointer;" href="/visual/0101/na/1481-1-1/" target="_blank"><img src="/img/dot-chart.png" border="0"></a></td>
            </tr>
    
</table>
            
<script>
(function() {
    var jsonArr = [];
    var obj = {};
    
    var arrString = document.getElementsByTagName('tr').length; // 
    alert(arrString); // вывод количества строк
    
    
    for(i=0;i<arrString;i++){
        var CurrentString = document.getElementsByTagName('tr')[i].innerHTML;           
        var arrСolumn = CurrentString.getElementsByTagName('td').length;  // для каждой строчки свое кол-во столбцов(тк некоторые строки различаются)
        
        alert(CurrentString); 
        alert(arrСolumn); 
        
        for(j=0;j<arrСolumn;j++){
            var CurrentColumn=CurrentString.getElementsByTagName('td')[j].innerText;
            
            alert(CurrentColumn);
        
        }
    
    
    }
    
    
})();
 
</script>
            
</body>
</html>
← Web-разработка на .NET Core
Есть ли libs для создания карт из нескольких снимков →

Небольшой совет: лучше дебажить через console.log() (вывод смотреть в консоли Ctrl+Shift+J), alert() уже давно в прошлом.

И, кстати, в циклах тоже не забывайте объявлять переменную-счётчик через var.

neversleep ★★
()
Последнее исправление: neversleep (всего исправлений: 2)
Ответ на: комментарий от bvn13

Предлагать, да еще как! Только я совсем с ним не знаком, почти как и с JS. Поэтому, если вам не сложно, то с конкретными вещами (что использовать)

timas-cs
() автор топика
Ответ на: комментарий от timas-cs

Сделай так чтобы это была нода, а не её строковое представление.

surefire ★★★
()
Последнее исправление: surefire (всего исправлений: 1)

Как то так

(function() {

    var arrStrings = document.getElementsByTagName('tr');
    console.log(arrString.length);

    for(i = 0, l = arrStrings.length; i < l; i++) {
        var currentString = arrStrings[i];
        var arrСolumns    = currentString.querySelectorAll('td');
        console.log(currentString.textContent);
        for(j = 0, m = arrColumns.length; j < m; j++) {
            var currentColumn = arrColumns[j];
            console.log(currentColumn.textContent);
        }
    }

})();
anonymous
()
Ответ на: комментарий от timas-cs

С jQuery будет намного проще, https://jquery.com/

Сначала нужно подключить саму библиотеку:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Дальше ваш код: 

<script>
	$('tr').each(function(row, tr) { 
		$('td', tr).each(function(col, td) {
			var s = $(td).text(); // или td.innerText, или td.textContent
			console.log(s);
		});
	});
<script>

neversleep ★★
()
Ответ на: комментарий от neversleep

Спасибо за помощь вам и всем, кто откликнулся

timas-cs
() автор топика
Ответ на: комментарий от neversleep

Если не нужна поддержка мёртвых браузеров:

for (const row of document.getElementsByTagName('tr')) {
  for (const col of row.getElementsByTagName('td')) {
    console.log(col.textContent)
  }
}

или

for (const col of document.getElementsByTagName('td')) {
  console.log(col.textContent)
}

Зачем для этой задачи jQuery, непонятно.

theNamelessOne ★★★★★
()
Ответ на: комментарий от theNamelessOne 
document.querySelectorAll('td').forEach(col => console.log(col.textContent))
anonymous
()
Ответ на: комментарий от theNamelessOne

Зачем для этой задачи jQuery, непонятно.

Зашла тема про jQuery, я привел пример, нужно/ненужно - пусть автор сам решает.

neversleep ★★
()
Последнее исправление: neversleep (всего исправлений: 1)
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← Web-разработка на .NET Core
Web-development
Есть ли libs для создания карт из нескольких снимков →