在wordpress中的html表中动态添加和删除行

Question

使用JavaScript在html表中添加/删除行

I am a begginer in WordPress. 我是WordPress的初学者。 I have made an html page using javasrcipt to add/remove row in html table. 我使用javasrcipt创建了一个html页面来添加/删除html表中的行。 This html page works fine normally. 这个html页面工作正常。 But when I copied it in WordPress it never responses. 但是当我在WordPress中复制它时，它永远不会响应。 It doesn't let me add\\remove rows. 它不允许我添加\\删除行。

Please help me with the WordPress code. 请帮我使用WordPress代码。

The code is below: 代码如下：

 <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

I won't do the whole thing (SO is not a free do it for you place), but I can get you started. 我不会做整件事（所以不是免费为你做的事），但我可以让你开始。

Create page-tables.php in your theme and add 在主题中创建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();

This will work for 1 table input only. 这仅适用于1个表输入。

You can now go to your page, create a page and select 'Tables' page template which will show you your table. 您现在可以转到您的页面，创建页面并选择“表格”页面模板，该模板将显示您的表格。

What you need to do now is: 你现在需要做的是：

Set up a save function so that the input values will save to the post meta 设置保存功能，以便输入值将保存到post meta
Save all the values in a single meta, preferably as a json string that you can convert to array 将所有值保存在单个元数据中，最好是作为可以转换为数组的json字符串
Read from the saved array and create a foreach loop with a single row - that way you'll go through all the values and output table row inside a foreach 从保存的数组中读取并创建一个带有单行的foreach循环 - 这样您将foreach所有值和输出表行
Enqueue JavaScript in a separate file ( custom.js insdide a theme will do), that will add and delete rows, and all the saved values on button clicks. 将JavaScript custom.js一个单独的文件（ custom.js insdide主题将执行），这将添加和删除行，以及按钮单击时所有保存的值。

Hope this helps. 希望这可以帮助。

在wordpress中的html表中动态添加和删除行

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-01-16 07:13:25

在wordpress中的html表中动态添加和删除行

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-01-16 07:13:25

解决方案1
0 已采纳 2017-01-16 07:13:25