Google Webapps：HTML表格在手機上顛倒渲染

我正在爲我參加大學的學生組織創建設備管理和租賃系統。 webapp在我的電腦上完美地迴應，但當我嘗試從我的iPad或iPhone上運行webapp時，似乎出現了一些無意義的現象。（顯然，除了移動版本的Chrome之外，這也會影響Safari的桌面版本。）Google Webapps：HTML表格在手機上顛倒渲染

該webapp很大程度上依賴於幾個相對簡單的HTML表格。當我在移動設備上運行webapp時，表格按照升序順序反向渲染，而不是像桌面版本那樣按降序排列。

這（顯然）影響應用程序的完整性，我不完全確定爲什麼。

的潛在問題代碼：

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進行優化。任何和所有的幫助將是超級讚賞。謝謝！

來源

2016-08-14 Austin Crum

您是否收到過任何錯誤？ – KENdi

而不是使用

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

使用

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

來源

2016-08-17 07:18:47

的我想我已經想通了。無論出於何種原因，谷歌瀏覽器的桌面版本可能會將table.rows.length等同於table.length，而Safari和其他網絡瀏覽器則需要淘氣.rows。

更改

var row = table.insertRow(table.length)

到

var row = table.insertRow(table.rows.length)解決的問題。

來源

2016-08-18 01:58:22

Google Webapps：HTML表格在手機上顛倒渲染

回答

相關問題