Question

Add/Remove row in html Table using JavaScript

我是WordPress的初学者。我使用javasrcipt创建了一个html页面来添加/删除html表中的行。这个html页面工作正常。但是当我在WordPress中复制它时，它永远不会响应。它不允许我添加\删除行。

请帮我使用WordPress代码。

代码如下：

<html>
    <head>
    <title> Timesheet Form</title>
    <script language="javascript">
        function addRow(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            //Column 1
            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "button";
            var btnName = "button" + (rowCount + 1);
            element1.name = btnName;
            element1.setAttribute('value', 'Delete'); // or element1.value = "button";
            element1.onclick = function () { removeRow(btnName); }
            cell1.appendChild(element1);
            //Column 2  
            var cell2 = row.insertCell(1);
            cell2.innerhtml = rowCount + 1;
    		//Column 3  
            var cell3 = row.insertCell(2);
            cell3.innerhtml = "Branch";
    		
            //Column 4
            var cell4 = row.insertCell(3);
            var element4 = document.createElement("input");
            element4.type = "text";
            cell4.appendChild(element4);
    		
    		//Column 5  
            var cell5 = row.insertCell(4);
            cell5.innerhtml = "Sem";
    		
            //Column 6
            var cell6 = row.insertCell(5);
            var element6 = document.createElement("input");
            element6.type = "text";
            cell6.appendChild(element6);
    		
    		//Column 7  
            var cell7 = row.insertCell(6);
            cell7.innerhtml = "Subject";
    		
            //Column 8
            var cell8 = row.insertCell(7);
            var element8 = document.createElement("input");
            element8.type = "text";
            cell8.appendChild(element8);
    		
    		//Column 9  
            var cell9 = row.insertCell(8);
            cell9.innerhtml = "Time From";
    		
            //Column 10
            var cell10 = row.insertCell(9);
            var element10 = document.createElement("input");
            element10.type = "text";
            cell10.appendChild(element10);
    		
    		//Column 11  
            var cell11 = row.insertCell(10);
            cell11.innerhtml = "Time To";
    		
            //Column 12
            var cell12 = row.insertCell(11);
            var element12 = document.createElement("input");
            element12.type = "text";
            cell12.appendChild(element12);
        }
        
        function removeRow(btnName) {
            try {
                var table = document.getElementById('dataTable');
                var rowCount = table.rows.length;
                for (var i = 0; i < rowCount; i++) {
                    var row = table.rows[i];
                    var rowObj = row.cells[0].childNodes[0];
                    if (rowObj.name == btnName) {
                        table.deleteRow(i);
                        rowCount--;
                    }
                }
            }
            catch (e) {
                alert(e);
            }
        }
    </script>
    </head>
    <h3>Timesheet Form</h3>
    <body>
        <table  width="350px" border="1">
            <tr>
                <td>Your Name</td><td><input type="text" value="" name="nameTxt"></td>
            </tr>
        </table>
        <input type="button" value="Add Row" onClick="addRow('dataTable')" />
        <table id="dataTable" width="350px" border="1">
            <tr>
                <td><input type="button" name="button1" value="Delete" onClick="removeRow('button1')"></td>
                <td>1</td>
                <td>Branch</td><td><input type="text" value="" name="branchTxt"></td><td>Sem</td><td><input type="text" value="" name="semTxt"></td>
                <td>Subject</td><td><input type="text" value="" name="subTxt"></td><td>Time From</td><td><input type="text" value="" name="timeFromTxt"></td>
                <td>Time To</td><td><input type="text" value="" name="timeToTxt"></td>
            </tr>
        </table>  
    </body>
</html>

Answer 1

我不会做所有的事情（所以不是免费为你做的事情），但我可以让你开始。

在主题中创建foreach并添加

foreach

这仅适用于1个表输入。

您现在可以转到您的页面，创建页面并选择表格＆＃39;页面模板，它会显示你的表格。

您现在需要做的是：

设置保存功能，以便输入值保存到post meta
将所有值保存在单个元数据中，最好是可以转换为数组的json字符串
从已保存的数组中读取并创建一个包含单行的custom.js循环 - 这样您就可以浏览formatter
将JavaScript排入单独的文件中（$("#slider").dateRangeSlider({ formatter: function(v){ return v.toUTCString(); }, bounds: {min: new Date(2012, 0, 1, 10,30,10), max: new Date(2012, 11, 31, 12, 59, 59)}, defaultValues: {min: new Date(2012, 1, 10), max: new Date(2012, 4, 22)}, step:{days:2} }); insdide主题将执行），这将添加和删除行，以及按钮点击时保存的所有值。

希望这有帮助。

在wordpress

1 个答案: