javascript - CSS 样式不粘

Question

所以这有点复杂

我使用 phonegap 创建了一个应用程序。我正在尝试实现一个“待办事项”列表。我找到了一个很棒的 javascript 方法示例，我已将其放入主 index.html 文档中。

因此，当应用程序首次启动时，它运行良好并且看起来符合预期:

它让我可以添加新的待办事项，选中要删除的一堆，或者点击一个按钮删除它们，等等。

但是当我关闭应用程序并重新加载它时，它会丢失所有样式并且删除按钮不再起作用:

但是，如果我单击“添加元素”，新元素将以它们应有的样式显示...

因此，这是脚本的 index.html 头中的代码:

<script type="text/javascript" language="JavaScript">
    
    //Create a new To-Do
    function createNewToDo()
    {
        var todoDictionary = {};
        //Prompt the user to enter To-Do
        var todo="ASSIGNMENT NAME";
        var todolink="index.html#fastshutter";
        if (todo!=null)
        {
            if (todo == "")
            {
                alert("To-Do can't be empty!");
            }
            else
            {
                //Append the new To-Do with the table
                todoDictionary = { check : 0 , text : todo , text2 : todolink};
                addTableRow(todoDictionary,false);
            }
        }
        
    }
    
    //Add a row to the table
    var rowID = 0;
    function addTableRow(todoDictionary, appIsLoading)
    {
        
        rowID +=1;
        var table = document.getElementById("dataTable");
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        
        //Set up the CheckBox
        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name="chkbox[]";
        element1.checked = todoDictionary["check"];
        element1.setAttribute("onclick","checkboxClicked()");
        element1.className = "checkbox";
        cell1.appendChild(element1);
        
        //Set up the TextBox
        var cell2 = row.insertCell(1);
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name = "txtbox[]";
        element2.size = 16;
        element2.id = "text"+rowID;
        element2.value = todoDictionary["text"];
        element2.setAttribute("onchange","saveToDoList()");
        element2.className = "textbox";
        cell2.appendChild(element2);
        
        //Set up the View Button
        var cell3 = row.insertCell(2);
        var element3 = document.createElement("input");
        element3.type = "button";
        element3.id = rowID;
        element2.value = todoDictionary["text"];

        element3.setAttribute("onclick","window.open('index.html#fastshutter','_self')");
        element3.className = "viewButton";
        cell3.appendChild(element3);
        
        //Set up the Delete Button
        var cell4 = row.insertCell(3);
        var element4 = document.createElement("input");
        element4.type = "button";
        
        element4.setAttribute("onclick","deleteSelectedRow(this)");
        element4.className = "deleteButton";
        cell4.appendChild(element4);
        
        //Save & Update UI
        checkboxClicked();
        saveToDoList();
        
        if (!appIsLoading)
        alert("Task Added Successfully.");
    }
    
    
    //Add storke to completed tasks text
    function checkboxClicked()
    {
        
        //Get current table
        var table = document.getElementById("dataTable");
        var rowCount = table.rows.length;
        
        //Loop through all rows
        for(var i=0; i<rowCount; i++)
        {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            var textbox = row.cells[1].childNodes[0];
            
            //checkbox is checked
            if(null != chkbox && true == chkbox.checked)
            {
                if(null != textbox)
                {
                    textbox.style.setProperty("text-decoration", "line-through");
                }
            }
            
            //checkbox is not checked
            else
            {
                textbox.style.setProperty("text-decoration", "none");
            }
            
        }
        //Save
        saveToDoList();
    }
    
    
    
    //Views textField's content of the selected row
    function viewSelectedRow(todoTextField)
    {
        alert(todoTextField.value);
    }
    
    
    //Deletes current row
    function deleteSelectedRow(deleteButton)
    {
        var p=deleteButton.parentNode.parentNode;
        p.parentNode.removeChild(p);
        saveToDoList();
    }
    
    
    function removeCompletedTasks()
    {
        //Get current table
        var table = document.getElementById("dataTable");
        var rowCount = table.rows.length;
        
        //Loop through all rows
        for(var i=0; i<rowCount; i++)
        {
            //Delete row if checkbox is checked
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked)
            {
                table.deleteRow(i);
                rowCount--;
                i--;
            }
            
            
        }
        
        //Save
        saveToDoList();
        alert("Completed Tasks Were Removed Successfully.");
        
    }
    
    
    function saveToDoList()
    {
        //Create a todoArray
        var todoArray = {};
        var checkBoxState = 0;
        var textValue = "";
        
        //Get current table
        var table = document.getElementById("dataTable");
        var rowCount = table.rows.length;
        
        if (rowCount != 0)
        {
            //Loop through all rows
            for(var i=0; i<rowCount; i++)
            {
                var row = table.rows[i];
                
                //Add checkbox state
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked)
                {
                    checkBoxState = 1;
                }
                else
                {
                    checkBoxState= 0;
                }
                
                
                //Add text data
                var textbox = row.cells[1].childNodes[0];
                textValue = textbox.value;
                
                //Fill the array with check & text data
                todoArray["row"+i] =
                {
                    check : checkBoxState,
                    text : textValue
                };
                
            }
        }
        else
        {
            todoArray = null;
        }
        
        //Use local storage to persist data
        //We use JSON to preserve objects
        
        window.localStorage.setItem("todoList", JSON.stringify(todoArray));
    }
    
    
    
    function loadToDoList()
    {
        
        //Get the saved To-Do list array by JSON parsing localStorage
        var theList = JSON.parse(window.localStorage.getItem("todoList"));
        
        
        if (null == theList || theList=="null")
        {
            deleteAllRows();
        }
        else
        {
            var count = 0;
            for (var obj in theList)
            {
                count++;
            }
            
            //Clear table
            deleteAllRows();
            //Loop through all rows
            for(var i=0; i<count; i++)
            {
                //Add row
                addTableRow(theList["row"+i],true);
            }
            
        }
        
    }
    
    
    
    function deleteAllRows()
    {
        //Get current table
        var table = document.getElementById("dataTable");
        var rowCount = table.rows.length;
        
        //Loop through all rows
        for(var i=0; i<rowCount; i++)
        {
            //delete row
            table.deleteRow(i);
            rowCount--;
            i--;
        }
        
        //Save
        saveToDoList();
    }
    
    
    
    
    </script>

和样式(也在头部)

<style type="text/css">

/* BeginOAWidget_Instance_2127022: #gallery */

.viewButton {
    background-color:Transparent;
    width:50px
    height:32px;
}

.deleteButton { 
    background-color:Transparent;
    width:30px;
    height:30px;
}

这是实现页面的html代码:

<body bgcolor="#e0e0e0" onload="loadToDoList()" >

<div data-role="page" id="favlist">
<div data-role="header">
<h1><a href="#choose" data-role="button" data-icon="arrow-l" data-iconpos="right">BACK</a> Favourites </h1>
</div>
<div data-role="content">
  <button type="button" class="addToDo" onclick="createNewToDo()">ADD</button>
  <button type="button" class="removeTasks" onclick="removeCompletedTasks()">REMOVE</button>
  <br/><br/><br/>
  <table id="dataTable" width="100%" border="0">
  </table> 
 <a href="#choose" data-role="button" data-theme="a">CLOSE</a> 
</div>
</div>

所以我不确定 jquerymobile css 文件是否会干扰它？

谢谢你的建议

编辑:我能够弄明白。我需要通过向 jquery css 添加一个新的按钮类来完全覆盖按钮元素的 jquery 移动 CSS。在第一次运行和添加新元素时，它使用了我在 HTML 中放入的内联样式，但在重新加载时它使用的是标准样式

Answer 1

我想通了。我需要通过向 jquery css 添加一个新的按钮类来完全覆盖按钮元素的 jquery 移动 CSS。在第一次运行和添加新元素时，它使用了我在 HTML 中放入的内联样式，但在重新加载时它使用的是标准样式