MiniUI動態添加table表格

本文將介紹一下，如何用Jquery MiniUi動態添加一行table表格

1.效果展示

---

　　　　　　　　　　　　　　　　 ↓

2.具體代碼

---

    <script type="text/javascript">
        function addRow() {
            var form = document.getElementById("addForm");
            var table = document.getElementById("table_Records");
            var id_com = form.getElementsByTagName("input")[0].value;
            var id_txtOne = form.getElementsByTagName("input")[2].value;
            var id_txtTwo = form.getElementsByTagName("input")[4].value;
            var i = table.rows.length - 1;
            var tr = table.insertRow();
            tr.style.cssText = table.rows[0].style.cssText;
            tr.insertCell(0).innerHTML = parseInt(table.rows[i].cells[0].innerHTML) + 1;
            tr.insertCell(1).innerHTML = id_txtOne;
            tr.insertCell(2).innerHTML = parseInt(id_txtOne) + parseFloat(table.rows[i].cells[2].innerHTML);
            tr.insertCell(3).innerHTML = id_com;
            tr.insertCell(4).innerHTML = "2.6";
            tr.insertCell(5).innerHTML = id_txtTwo;
            tr.insertCell(6).innerHTML = parseInt(id_txtTwo) + parseFloat(table.rows[i].cells[6].innerHTML);
        }
    </script>

    <div align="center">
        <fieldset style="width:782px;border:solid 1px #aaa;margin-top:8px;position:relative;">
            <legend>添加施工記錄</legend>
            <div id="addForm" style="padding:5px;">
                <table style="width:100%;">
                    <tr>
                        <td>工序：</td>
                        <td><input id="id_com" class="mini-combobox" url="~/Data/data_GongXu.txt" /></td>
                        <td>施工時間(min)：</td>
                        <td><input id="id_one" class="mini-textbox" /></td>
                        <td>壓裂液用量(m&sup3;)：</td>
                        <td><input id="id_two" class="mini-textbox" /></td>
                        <td><a class="mini-button" onclick="addRow">添加</a></td>
                    </tr>
                </table>
            </div>
        </fieldset>
        <br />
        <table id="table_Records" border="1" cellpadding="0" cellspacing="0" style="width:800px;text-align:center">
            <tr>
                <td rowspan="2">步驟</td>
                <td colspan="2">施工時間min</td>
                <td rowspan="2">工序</td>
                <td rowspan="2">排量m&sup3;/min</td>
                <td colspan="2">壓裂液用量m&sup3;</td>
            </tr>
            <tr>
                <td>階段</td>
                <td>累積</td>
                <td>階段</td>
                <td>累積</td>
            </tr>
            <tr height=18>
                <td height=18>1</td>
                <td>11.5</td>
                <td>11.5</td>
                <td>前置液</td>
                <td>2.6</td>
                <td>30</td>
                <td>30</td>
            </tr>
            <tr height=18 style='height:13.5pt'>
                <td height=18>2</td>
                <td>10</td>
                <td>21.5</td>
                <td>攜砂液</td>
                <td>2.6</td>
                <td>20</td>
                <td>50</td>
            </tr>
            <tr height=18 style='height:13.5pt'>
                <td height=18>3</td>
                <td>5</td>
                <td>26.5</td>
                <td>替擠液</td>
                <td>2.6</td>
                <td>10</td>
                <td>60</td>
            </tr>
        </table>
    </div>

不要忘記一點，這里需要引用miniUI的css、js等文件，不然無法顯示該樣式。

3.操作說明

---

1> 當每一次點擊“添加”按鈕的時候，階段下的單元格就會新添一條你輸入到文本框中的值，而累積則會將上一行的數值與你輸入值的和顯示出來，以此來達到一個動態添加table行的操作。

2> 這里暫時先用js的代碼來獲取html的控件，因為miniUI的API中沒有找到關於table的獲取/設置屬性值的介紹，若有了解的大神，非常高興一起討論研究！