Question

我想使用<td>属性更改表innerHTML数据。但在应用innerHTML属性后，{J}代码中无法访问<td>中设置的值。

所以有innerHTML属性的替代方法，以便可以在<td>中设置值，也可以在Javascript代码中访问它。

Javascript代码

<script>
    var row=0,col=0,i=1;//can be used in loop

    document.getElementById("tableID").rows[row].cells[col].innerHTML=i;
</script>

Answer 1

看看这个小样本，innerHTML可行。用光标键走过桌子。向我们展示更多代码

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Table key´s</title>
    <style>
      td{width:40px;height:40px;background:#ddd;}
    </style>
  </head>
  <body>
    <div id="tableContainer">
    </div>
    <script>    
      var aktRow=aktCol=4,max=9;
      tableContainer.innerHTML = '<table id="mt">'+('<tr>'+'<td></td>'.repeat(max+1)+'</tr>').repeat(max+1)+'</table>';
      mt.rows[aktRow].cells[aktCol].style.background='#f00';
      window.addEventListener("keyup", function(e){
        var colDiff, rowDiff;
        var keyMap = new Map([[37,[-1,0]],[38,[0,-1]],[39,[1,0]],[40,[0,1]]]);
        if (keyMap.has(e.keyCode)){
          mt.rows[aktRow].cells[aktCol].style.background='#ddd';
          mt.rows[aktRow].cells[aktCol].innerHTML=aktRow+'-'+aktCol;
          console.log(mt.rows[aktRow].cells[aktCol].innerHTML);
          [colDiff,rowDiff]=keyMap.get(e.keyCode);
          aktRow+=rowDiff;
          aktCol+=colDiff;
          aktRow = (aktRow>max) ? max : (aktRow < 0) ? 0 : aktRow;
          aktCol = (aktCol>max) ? max : (aktCol < 0) ? 0 : aktCol;
          mt.rows[aktRow].cells[aktCol].style.background='#f00';
        }
      }) 
    </script>
  </body>
  </html>

Answer 2

你的代码错了

.rows [行] .cells [COL]

这是我的建议：为每个单元格设置一个id，类似于col1row1作为id，然后通过id：

访问单元格

from django.utils.decorators import method_decorator
from django.views.decorators.csrf import csrf_exempt     
@method_decorator(csrf_exempt, name='dispatch')
def dispatch(self, request, *args, **kwargs):
     return super(LessonUploadWorkView,self).dispatch(request,*args,**kwargs)

或者让for循环遍历每个行和单元格，例如<{1}}

看看这个： Iterating through a table with JS

如何在javascript代码中获取innerHTML值

2 个答案: