javascript - 使用 Javascript 在现有表格下添加新的 html 表格

标签 javascript html-table

我有一个 html 表格和一段 Javascript 代码,通过按“添加新表格”按钮在该表格下添加一个新表格。问题是当我刷新页面时,刚刚添加的表消失了。如何让它添加后刷新页面时保持不变?

<table border="0" style="margin: auto; ">

<td width="60%" >

<fieldset style="width:530px; padding-left:5px; background-color:white " >

<INPUT type="button" value="Add new Table" onclick="addRow('dataTable')" />

School/University/College*</br>
<input name="school_1" type="text" size="73"/>
</br></br>
Field of Study</br>
<input name="field_1" type="text" size="73"/>
</br></br>
Specialized subjects</br>
<input name="specialized_subject_1" type="text" size="73" />
</br></br>
Degree</br>
<input name="degree_1" type="text" size="73"/>
</br></br>
Grade</br>
<input name="grade_1" type="text" size="73" />
</br></br></br>

    Attended from:&nbsp;<select name="month_1_1"> 
    <option value=" "> EMPTY </option> 
    <option value="January">January</option> 
    </select>

    <select id="year_1_1" name="year_1_1"> 
    <option value=" "> EMPTY </option>
    <option value="2009">2009</option>
   </select>&nbsp;&nbsp;&nbsp;&nbsp;

    Until:&nbsp;<select name="month_1_2"> 
    <option value=" "> EMPTY </option> 
    <option value="January">January</option>                        
    </select>

    <select name="year_1_2"> 
    <option value=" "> EMPTY </option>
    <option value="2009">2009</option>
   </select>&nbsp;&nbsp;    

</h2></font>
</fieldset>

</td>

</table>

这是 Javascript 代码:

 <SCRIPT language="javascript">
   function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var colCount = table.rows[0].cells.length;

    for(var i=0; i<colCount; i++) {

        var newcell = row.insertCell(i);

        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        //alert(newcell.childNodes);
        switch(newcell.childNodes[0].type) {
            case "text":
                    newcell.childNodes[0].value = "";
                    break;
            case "select-one":
                    newcell.childNodes[0].selectedIndex = 0;
                    break;
        }
    }
  }


</SCRIPT>

最佳答案

JavaScript 不会写入文件。因此,只有当您位于该页面上时才能进行更改。我也不希望用户能够直接编辑 HTML 文件。

如果您需要它们持续存在并且更改是针对特定用户的,您可以保存他们的选项(即添加的表数量)并让服务器端(PHP 或 w/e)在页面打开时添加表上菜了。

关于javascript - 使用 Javascript 在现有表格下添加新的 html 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15642059/

相关文章:

java - 使用java在Mongodb中插入数据并使用javascript从Mongo DB中检索数据

javascript - Android 上的 ListView 滚动不稳定且缓慢

javascript - 如何根据 URL 参数显示表格行

javascript - 如何使用jquery对表的每一行和每一列的值进行求和

html - 使用 Bootstrap 的表格单元格中的多行文本

javascript - React中Date方法的ask

javascript - 在 Canvas 上绘制数组图像?

javascript - 函数前的感叹号有什么作用?

javascript - 尝试获取表 react js单击的行的数据

javascript - 从表行获取数据到 Javascript