4

I'm having an issue w/ a Content Editor Web Part. I would like to add an HTML table that gives users the ability to add and remove rows from a table. How should I add the following code to the CEW? Does it support this type of thing?

$('.AddNew').click(function(){
   var row = $(this).closest('tr').clone();
   row.find('input').val('');
   $(this).closest('tr').after(row);
   $('input[type="button"]', row).removeClass('AddNew')
                                 .addClass('RemoveRow').val('Remove item');
});

$('table').on('click', '.RemoveRow', function(){
  $(this).closest('tr').remove();
});

And the HTML:

<table>
    <tr><td>Item Type</td><td>Item</td><td>Add/Remove Item</td></tr>
    <tr><td><input type='text' value='Fruit >'></td>
        <td><input type='text' value='Apple'></td>
        <td><input type='button' class='AddNew' value='Add new item'></td></tr>
</table>

Thanks.

Improve this question

1 Answer 1

Reset to default
5

Content Editor web part is normally used to display the contents on the screen. In your case, you have HTML and jQuery code. So you have to format your code in proper HTML format and then paste it in content editor webpart. For example,

Also you have to add $(document).ready(); into your code. Your final code should be

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function() {
                $('.AddNew').click(function() {
                    var row = $(this)
                        .closest('tr')
                        .clone();
                    row.find('input').val('');
                    $(this)
                        .closest('tr')
                        .after(row);
                    $('input[type="button"]', row)
                        .removeClass('AddNew')
                        .addClass('RemoveRow')
                        .val('Remove item');
                });

                $('table').on('click', '.RemoveRow', function() {
                    $(this)
                        .closest('tr')
                        .remove();
                });
            });
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>Item Type</td>
                <td>Item</td>
                <td>Add/Remove Item</td>
            </tr>
            <tr>
                <td><input type="text" value="Fruit >" /></td>
                <td><input type="text" value="Apple" /></td>
                <td><input type="button" class="AddNew" value="Add new item" /></td>
            </tr>
        </table>
    </body>
</html>

You can read more about content editor webpart here

Alternate option:

You can create HTML file, paste the code in answer into the HTML file, upload the HTML file to document library or site asset.

Copy the path of the HTML file.

Edit Content Editor webpart and paste the link over there

enter image description here

Click on OK and save the page. This will definitely work.

Let me know if this helped.

Improve this answer
5
  • 1
    Thanks for this! I've added code.jquery.com/jquery-3.3.1.js to src="pathtojQuery" yet the CEW is still not rendering the HTML, but rather just showing the code as I pasted it. Any further thoughts?
    – Martin Muldoon
    Dec 5, 2018 at 12:53
  • Then what you can do is, you can create a HTML file and paste the code into that. And then upload the html file to Document library or SIte Asset library. And copy the path of the HTML file and edit the content editor webpart and in the link section enter the path of the html file there and save the page. Let me add this portion also to the answer.
    – Aakash Maurya
    Dec 5, 2018 at 13:08
  • You also have to add $(document).ready() to your code. I tried your code and it worked only when I added $(document).ready(). I have updated the final code to the answer
    – Aakash Maurya
    Dec 5, 2018 at 13:26
  • Aakash, last question if I may.... Is it possible to persist the data in the table for each user? I should have thought of this.... Thanks!
    – Martin Muldoon
    Dec 5, 2018 at 13:59
  • If you need to persist the data in the table for each user then you have to store that data somewhere in the SharePoint list and on load you have to fetch it and render it again on page load.
    – Aakash Maurya
    Dec 6, 2018 at 4:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.