Content editor web part issue not rendering HTML

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/253768

  •  29-01-2021
  •  | 
  •  

Question

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.

Was it helpful?

Solution

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top