Борясь с DOM элементами

Question

У меня есть HTML-таблица в моей странице .aspx, которая выглядит следующим образом:

<table id="quotationsListTable" class="quoteTbl" width="100%" border="1"> 
    <tr> 
    <th></th> 
    <th>REF</th> 
    <th>Name</th> 
    <th>Arrival</th> 
    <th>Time</th> 
    <th>Departure</th> 
    <th>Time</th> 
    <th>Curr</th> 
    <th>Sale</th> 
    <th>Cost</th> 
    </tr> 
    <tr> 
    <td><input type="checkbox" name="chk"/></td> 
    <td> 1 </td> 
    <td><input type="text" style="width: 50px" /> </td> 
    <td><input type="text" style="width: 150px"/> </td> 
    <td> <input type="text" style="width: 50px"/> </td> 
    <td> <input type="text" style="width: 50px"/> </td> 
    <td> <input type="text" style="width: 50px"/> </td> 
    <td> <input type="text" style="width: 50px"/> </td> 
    <td> <input type="text" style="width: 50px"/> </td> 
    <td> <input type="text" style="width: 50px"/> </td> 
    </tr> 
    </table> 

У меня также есть яваскрипт функция для удаления всех строк в моей таблице, называя мое элементной ID " quotationsListTable».

Javascript функция, которая находится в отдельном файле .js является следующим:

deleteAllrows('quotationsListTable'); 

function deleteAllrows(tableID) { 
    try { 
     var table = document.getElementByID(tableID); 
     var rowCount = table.rows.length; 

     for (var i = 1; i < rowCount; i++) { 
      var row = table.rows[i]; 
      var chkbox = row.cells[0].childNodes[0]; 
      table.deleteRow(i); 
      rowCount--; 
      i--; 


     } 
    } catch (e) { 
     alert(e); 
    } 
} 

Проблема под рукой, что моя функция JS не может получить таблицу по идентификатору, сообщение об ошибке, которое выбрасывается в ' не определено.

Answer 1

Это document.getElementById примечания маленького d

var table = document.getElementById(tableID); 

https://developer.mozilla.org/en-US/docs/DOM/document.getElementById

Answer 2

Вы должны установить функцию после того, как содержимое страницы будет готово. И, пожалуйста, измените свой «getElementByID» на «getElementById», Dum в нижнем регистре. Попробуйте использовать jQuery, это простой способ.

См:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script> 
    $().ready(function(){     
    deleteAllrows(); 

    function deleteAllrows() { 
     try { 
      var table = document.getElementById('quotationsListTable'); 
      alert(table); 
      var rowCount = table.rows.length; 

      for (var i = 1; i < rowCount; i++) { 
       var row = table.rows[i]; 
       var chkbox = row.cells[0].childNodes[0]; 
       table.deleteRow(i); 
       rowCount--; 
       i--; 


      } 
     } catch (e) { 
      alert(e); 
     } 
    }   
    }); 
</script> 

Answer 3

Я предлагаю вам включить библиотеку Jquery и удалить строки с одной строкой .. проверить эту скрипку http://jsfiddle.net/SamirAdel/DyXHt/

deleteAllrows('quotationsListTable'); 

function deleteAllrows(tableID) { 
    $("#"+tableID+"tr:gt(0)").remove() 
}