我是 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>最佳答案
我不会做所有事情(SO 不是一个免费为你做的地方)，但我可以帮助你开始。
创建page-tables.php在您的主题中并添加
<?php
/*
Template Name: Tables
*/
get_header();
$meta = get_post_meta();
$name = ( isset( $meta['nameTxt'][0] ) && '' !== $meta['nameTxt'][0] ) ? $meta['nameTxt'][0] : '';
$branch = ( isset( $meta['branchTxt'][0] ) && '' !== $meta['branchTxt'][0] ) ? $meta['branchTxt'][0] : '';
$sem = ( isset( $meta['semTxt'][0] ) && '' !== $meta['semTxt'][0] ) ? $meta['semTxt'][0] : '';
$subject = ( isset( $meta['subTxt'][0] ) && '' !== $meta['subTxt'][0] ) ? $meta['subTxt'][0] : '';
$time_from = ( isset( $meta['timeFromTxt'][0] ) && '' !== $meta['timeFromTxt'][0] ) ? $meta['timeFromTxt'][0] : '';
$time_to = ( isset( $meta['timeToTxt'][0] ) && '' !== $meta['timeToTxt'][0] ) ? $meta['timeToTxt'][0] : '';
?>
<table width="350px" border="1">
<tr>
<td>
<?php esc_html_e( 'Your Name', 'your_theme_slug' ); ?>
</td>
<td>
<input type="text" value="<?php echo esc_attr( $name ); ?>" name="nameTxt">
</td>
</tr>
</table>
<input type="button" class="add_row_button" value="<?php esc_attr_e( 'Add Row', 'your_theme_slug' ); ?>"/>
<table id="dataTable" width="350px" border="1">
<tr>
<td>
<input type="button" class="delete_row_button" value="<?php esc_attr_e( 'Delete', 'your_theme_slug' ); ?>">
</td>
<td class="row_no">1</td>
<td>
<?php esc_html_e( 'Branch', 'your_theme_slug' ); ?>
</td>
<td>
<input type="text" value="<?php echo esc_attr( $branch ); ?>" name="branchTxt">
</td>
<td><?php esc_html_e( 'Sem', 'your_theme_slug' ); ?></td>
<td>
<input type="text" value="<?php echo esc_attr( $sem ); ?>" name="semTxt">
</td>
<td><?php esc_html_e( 'Subject', 'your_theme_slug' ); ?></td>
<td>
<input type="text" value="<?php echo esc_attr( $subject ); ?>" name="subTxt">
</td>
<td><?php esc_html_e( 'Time From', 'your_theme_slug' ); ?></td>
<td>
<input type="text" value="<?php echo esc_attr( $time_from ); ?>" name="timeFromTxt">
</td>
<td><?php esc_html_e( 'Time To', 'your_theme_slug' ); ?></td>
<td>
<input type="text" value="<?php echo esc_attr( $time_to ); ?>" name="timeToTxt">
</td>
</tr>
</table>
<?php get_footer();
这仅适用于 1 个表输入。
您现在可以转到您的页面，创建一个页面并选择“表格”页面模板，该模板将显示您的表格。
您现在需要做的是:
- 设置保存功能，以便将输入值保存到帖子元中
- 将所有值保存在单个元中，最好保存为可转换为数组的 json 字符串
- 从保存的数组中读取并创建
foreach使用单行循环 - 这样您将遍历foreach内的所有值和输出表行 - 将 JavaScript 放入单独的文件中(
custom.js放入主题即可)，这将添加和删除行，以及单击按钮时保存的所有值。
希望这有帮助。
关于javascript - 在wordpress中动态添加和删除html表中的行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41659224/