Javascript:未定义的表

时间:2018-06-19 08:35:41

标签: javascript html django

我通过Django模型的Javascript创建一个表。创建此表后,我无法从其他javascript函数访问其单元格值,引发的错误是该表是“未定义的”。

HTML

<div id="fileList">
  <table id="galleryTable" class="table table-striped table-advance table-hover">
    <tr>
      <th>Field 0</th>
      <th>Field 1</th>
      <th>Field 2</th>
      <th>Field 3</th>
      <th>Field 4</th>
      <th>Field 5</th>
      <th>Field 6</th>
    </tr>
  </table>
</div>

用于创建表的JS代码:

<script type="text/javascript">
    var imageObjectTable = [];
    var imageTable =[];
    var dateTable =  [];
    var urlTable = [];
    var commentTextTable =[];
    var commentUserTable =[];
    var commentUserProfilePicTable = [];
    var commenteDateTable =[];
    var i = 0;

    {% for imagemodel in imagemodel %}
        imageObjectTable.push("{{ imagemodel }}");
        imageTable.push("{{ imagemodel.image }}");
        dateTable.push("{{ imagemodel.date_taken }}");
        urlTable.push("{{ imagemodel.image.url }}");


        {% for comment in imagemodel.comments.all %}
            commentTextTable.push(new Array());
            commentTextTable[i].push("{{ comment.text }}");
            commentUserTable.push(new Array());
            commentUserTable[i].push("{{ comment.user }}");
            commentUserProfilePicTable.push(new Array());
            commentUserProfilePicTable[i].push("{{ comment.user.profile.profile_pic }}");
            commenteDateTable.push(new Array());
            commenteDateTable[i].push("{{ comment.created_date }}");
            {% empty %}
            commentTextTable.push(new Array());
            commentTextTable[i].push("No comment yet");
            commentUserTable.push(new Array());
            commentUserTable[i].push("No text comment yet");
            commenteDateTable.push(new Array());
            commenteDateTable[i].push("No date comment yet");
        {% endfor %}

        i = i+1;
    {% endfor %}

    table = document.getElementById("galleryTable");

          for(var i = 0; i < imageTable.length; i++)
           {
               // create a new row
               var newRow = table.insertRow(table.length);
               var cell0 = newRow.insertCell(0);
               cell0.innerHTML = imageTable[i];
               var cell1 = newRow.insertCell(1);
               cell1.innerHTML = dateTable[i];
               var cell2 = newRow.insertCell(2);
               cell2.innerHTML = urlTable[i];
               var cell3 = newRow.insertCell(3);
               cell3.innerHTML = "<input type='radio' name='RadioGroup1' onchange=\"setImage1('" + urlTable[i] + "','" + commentTextTable[i] + "','" + commentUserTable[i] + "','" + commenteDateTable[i] + "','" + commentUserProfilePicTable[i] +"')\">" ;
                var cell4 = newRow.insertCell(4);
               cell4.innerHTML = "<input type='radio' name='RadioGroup2' onchange=\"setImage2('" + urlTable[i] + "','" + commentTextTable[i] + "')\">" ;
                var cell5 = newRow.insertCell(5);
               cell5.innerHTML = "<input type='radio' name='RadioGroup3' onchange=\"setImage3('" + urlTable[i] + "','" + commentTextTable[i] + "')\">" ;
                var cell6 = newRow.insertCell(6);
               cell6.innerHTML = "<input type='radio' name='RadioGroup4' onchange=\"setImage4('" + urlTable[i] + "','" + commentTextTable[i] + "')\">" ;
           }
</script>

最后,JS函数的一个例子导致了一个未定义的表错误:

          function oneImageView() {

          var im2 = document.getElementById("2x2_topright");
          var im3 = document.getElementById("2x2_bottomleft");
          var im4 = document.getElementById("2x2_bottomright");


          var tbl  = document.getElementById('galleryTable');
          var rows = tbl.getElementsByTagName('tr');

          for (var row=0; row<rows.length;row++) {
              var cels = rows[row].getElementsByTagName('td')
              alert(rows[row].lenght); 
              //cels[2].style.display= "none";
            }
}

非常感谢你的帮助:)。

1 个答案:

答案 0 :(得分:0)

嘿,您正在此代码中访问的tr标签是第一行是th而不是td

for (var row=0; row<rows.length;row++) {
              var cels = rows[row].getElementsByTagName('td')       // error is here 
              alert(rows[row].lenght); 
              //cels[2].style.display= "none";
  }

因此要跳过该步骤,您必须从row = 1开始循环,对于rows[row].lenghtrows[row].length;-)