Google Webapps：HTML 表格在移动设备上颠倒呈现

Posted 2023-03-12

【中文标题】Google Webapps：HTML 表格在移动设备上颠倒呈现

【英文标题】：Google Webapps: HTML tables render upside down on mobile

【发布时间】：2016-08-14 07:54:55

【问题描述】：

我正在为我在大学参与的一个学生组织创建一个设备管理和租赁系统。 webapp 在我的计算机上响应完美，但是当我尝试从 iPad 或 iPhone 运行 webapp 时似乎发生了一些废话。 （显然，除了移动版 Chrome 之外，这也会影响桌面版 Safari。）

webapp 很大程度上依赖于几个相对简单的 html 表格。当我在移动设备上运行 web 应用程序时，表格会以相反的方式呈现，升序，而不是像桌面版本那样的降序。

这（显然）会影响应用程序的完整性，我不确定为什么。

潜在问题代码：

function tableMaker()
    var table = document.getElementById('AddT')

  //If the table is empty, start counting. Else, resume count from the last cell.
  if (table.rows.length < 1)
      var happy = "0"+table.rows.length
      var rownum = happy.slice(-2)
  else
      var happy = $('#AddT tr:last').prop("id")
      var happier = "0" + (Number(happy)+1)
      var rownum = happier.slice(-2)
  

  var row = table.insertRow(table.length)
  row.id = rownum
  console.log("Creating cells with the ID: "+rownum)

  var cell0 = row.insertCell(0)
  var cell1 = row.insertCell(1);
  var cell2 = row.insertCell(2);

  //The first cell won't have the option to be deleted.
  if(table.rows.length > 1)
      cell0.innerHTML = "<text onclick='javacript:delRow(\""+rownum+"\")'>x</text>"
  

  cell1.innerHTML = //Some painfully long select tag
  cell2.innerHTML = "<select id=select"+rownum+" disabled></select>"

  $('#addEquip').show("fade") //The div in which the table is contained
  $('#manLoad').hide() //A loading animation

Two web browsers showing different results （Bortha Muggerums 是我虚构的共同开发者。她帮助了我很多。）

在这张图片中，可以看到我遇到的问题。在 Safari 中，第一个单元格之后的每个单元格都标记为“01”，而在 Chrome 中，每个单元格都按顺序标记，因为它应该发生。

最终我需要针对 iPad 进行优化。任何和所有的帮助都将非常感激。谢谢！

【问题讨论】：

您是否收到任何错误？

【参考方案1】：

而不是使用

var happier = "0" + (Number(happy)+1)

使用

var happier = "0" + (parseInt(happy,10)+1)

【参考方案2】：

我想我已经明白了。无论出于何种原因，桌面版谷歌浏览器都可以将table.rows.length等同于table.length，而Safari和其他网络浏览器则需要那个淘气的.rows。

变化

var row = table.insertRow(table.length)

到

var row = table.insertRow(table.rows.length) 解决了这个问题。