我是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>
答案 0 :(得分:0)
我不会做所有的事情(所以不是免费为你做的事情),但我可以让你开始。
在主题中创建foreach
并添加
foreach
这仅适用于1个表输入。
您现在可以转到您的页面,创建页面并选择表格&#39;页面模板,它会显示你的表格。
您现在需要做的是:
custom.js
循环 - 这样您就可以浏览formatter
$("#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主题将执行),这将添加和删除行,以及按钮点击时保存的所有值。希望这有帮助。