dynamically add and delete rows in a html table in wordpress

Question

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

I am a begginer in WordPress. I have made an html page using javasrcipt to add/remove row in html table. This html page works fine normally. But when I copied it in WordPress it never responses. It doesn't let me add\\remove rows.

Please help me with the WordPress code.

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

<?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.

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
Save all the values in a single meta, preferably as a json string that you can convert to array
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
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.

Hope this helps.

dynamically add and delete rows in a html table in wordpress

Question

1 answers

solution1
0 ACCPTED 2017-01-16 07:13:25

dynamically add and delete rows in a html table in wordpress

Question

1 answers

solution1 0 ACCPTED 2017-01-16 07:13:25

solution1
0 ACCPTED 2017-01-16 07:13:25