Получение значения из ячейки таблицы в JavaScript... не jQuery

Я не могу поверить, как долго это у меня получилось, но я не могу понять, как извлечь значение ячейки из таблицы HTML, поскольку я перебираю через таблицу с помощью JavaScript. Я использую следующее для повторения:

  var refTab=document.getElementById("ddReferences")
  var  ttl;
  // Loop through all rows and columns of the table and popup alert with the value
  // /content of each cell.
  for ( var i = 0; row = refTab.rows[i]; i++ ) {
     row = refTab.rows[i];
     for ( var j = 0; col = row.cells[j]; j++ ) {
        alert(col.firstChild.nodeValue);
     }
  }

Каков правильный вызов, который я должен ввести в вызов alert(), чтобы отображать содержимое каждой ячейки моей таблицы HTML? Это должно быть в JS... нельзя использовать jQuery.

Ответы

Ответ 1

function GetCellValues() {
    var table = document.getElementById('mytable');
    for (var r = 0, n = table.rows.length; r < n; r++) {
        for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
            alert(table.rows[r].cells[c].innerHTML);
        }
    }
}

Ответ 2

введите ниже код

<html>
<script>


    function addRow(){
 var table = document.getElementById('myTable');
//var row = document.getElementById("myTable");
var x = table.insertRow(0);
var e =table.rows.length-1;
var l =table.rows[e].cells.length;
//x.innerHTML = "&nbsp;";
 for (var c =0,  m=l; c < m; c++) {
table.rows[0].insertCell(c);
   table.rows[0].cells[c].innerHTML  = "&nbsp;&nbsp;";
}

}




function addColumn(){
       var table = document.getElementById('myTable');
        for (var r = 0, n = table.rows.length; r < n; r++) {
                table.rows[r].insertCell(0);
                table.rows[r].cells[0].innerHTML =  "&nbsp;&nbsp;" ;

        }

    }

function deleteRow() {
    document.getElementById("myTable").deleteRow(0);

}

function deleteColumn() {
   // var row = document.getElementById("myRow");
 var table = document.getElementById('myTable');
 for (var r = 0, n = table.rows.length; r < n; r++) {
    table.rows[r].deleteCell(0);//var table handle 
}
}

</script>
<body>
<input type="button" value="row +" onClick="addRow()" border=0       style='cursor:hand'>
    <input type="button" value="row -" onClick='deleteRow()' border=0 style='cursor:hand'>
    <input type="button" value="column +" onClick="addColumn()" border=0 style='cursor:hand'>
    <input type="button" value="column -" onClick='deleteColumn()' border=0 style='cursor:hand'>

    <table  id='myTable' border=1 cellpadding=0 cellspacing=0>
 <tr id='myRow'>          
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
<tr>          
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

    </table>



</body>
</html>

Ответ 3

Если вы ищете содержимое TD (ячейки), то это будет просто: col.innerHTML

I.e: alert(col.innerHTML);

Затем вам нужно проанализировать это для любых значений, которые вы ищете.

Ответ 4

Код yo предоставил выполнение отлично. Помните, что если у вас есть код в заголовке, вам нужно дождаться загрузки dom. В jQuery это было бы просто так, как поставить ваш код внутри $(function(e){...});

В обычном javascript используйте window.onLoad(..) или тому подобное... или получим script после defnition таблицы (yuck!). Предоставленный вами фрагмент отлично работает, если у меня есть это для следующего:

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
</head>
<body>
  <table id='ddReferences'>
    <tr>
      <td>dfsdf</td> 
      <td>sdfs</td>
      <td>frtyr</td>
      <td>hjhj</td>
    </tr>
  </table>

<script>
var refTab = document.getElementById("ddReferences")
var  ttl;
// Loop through all rows and columns of the table and popup alert with the value
// /content of each cell.
for ( var i = 0; row = refTab.rows[i]; i++ ) {
   row = refTab.rows[i];
   for ( var j = 0; col = row.cells[j]; j++ ) {
      alert(col.firstChild.nodeValue);
   }
}

</script>
</body>
</html>

Ответ 5

Вы пробовали innerHTML?

Я бы склонен использовать getElementsByTagName() для поиска элементов <tr>, а затем для каждого, чтобы снова вызвать его, чтобы найти элементы <td>. Чтобы получить содержимое, вы можете использовать innerHTML или соответствующую (зависящую от браузера) вариацию на innerText.

Ответ 6

Если я правильно понял ваш вопрос, вы ищете innerHTML:

alert(col.firstChild.innerHTML);

Ответ 7

Несколько проблем:

  • Зависимость цикла в ваших операторах for - это назначение, а не проверка цикла, поэтому он может иметь бесконечный цикл

  • Вы должны использовать функцию item() для этих коллекций строк/ячеек, не уверен, что индекс массива работает на тех (а не на самом деле массивах JS)

  • Вы должны объявить объекты row/col для обеспечения правильности их области.

Вот обновленный пример:

var refTab=document.getElementById("ddReferences") 
var  ttl; 
// Loop through all rows and columns of the table and popup alert with the value 
// /content of each cell. 
for ( var i = 0; i<refTab.rows.length; i++ ) { 
  var row = refTab.rows.item(i); 
  for ( var j = 0; j<row.cells.length; j++ ) { 
    var col = row.cells.item(j);
    alert(col.firstChild.innerText); 
  } 
}

Замените innerText на innerHTML, если вы хотите HTML, а не текст.

Ответ 8

Угадай, что я собираюсь ответить на свои вопросы... Сарфраз был близок, но не совсем прав. Правильный ответ:

alert(col.firstChild.value);

Ответ 9

вышеупомянутый парень был близок, но вот что вам нужно:

       var table = document.getElementById(tableID);
       var rowCount = table.rows.length;        
         for (var r = 0, n = table.rows.length; r < n; r++) {
        for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
            alert(table.rows[r].cells[c].firstChild.value);
        }
    }
        }catch(e) {
            alert(e);
        }