Custom character sheet html - Create a table where we can add/remove rows

Greetings, web designers and custom sheets enthusiasts !

I am Bastodon. I'm a looooooong time user of Roll20 now, and i'm currently using it in order to create my very own role playing game with my very own universe and rules. With that comes custom characters sheets : i'm currently a student in IT, so html/css and even JS aren't a problem to me. But i found myself hurting a wall while developping it.

Here's my issue : i use table on my characters sheets, and i would like to put a button which could allow me or my players to add and remove rows from the table. I see this feature on a lot of characters sheets from other games, such as Rogue Trader or Warhammer Fantasy, so i know it's possible.

But despite my usage of html scripts and JavaScripts, there's nothing to do ! I just can't implement the thing. I've been working on this for a while, so now i'm asking for you guys help.

Does anyone of you have a sample of a functional custom sheet code that allows users to add/remove rows from a table within the sheet itself ?

I must admit : i'm not currently very experimented with Roll20 custom sheet html. The script i'm currently using (and working without the website) is no uses, and i rather not sharing my code in order to prevent from stealing content.

I really hope anyone of you guys can help me. I would be very grateful, and look forward to grant my potentional hero a jar full of cookies.

Thank you so much in advance. And pardon me if my english is not perfect : i'm actually french, les amis ! So be free to answer in english ou bien en français !

EXEMPLE (From Rogue Trader) :

             ====>              

You need to look up fieldset or repeating sections.

That rogue trader sheet will likely have something like (I havent look at the sheet - it wont match this exactly)

<fieldset class="repeating_skills">
    <div class="skills">
        <input type="text" name="attr_skill">
        <input type="checkbox" name="attr_check">
        <input type="checkbox" name="attr_check_10">
        <input type="checkbox" name="attr_check_20">
        <input type="number" name="attr_score">
    </div>
</fieldset>

The thing to note is - when you have properly named fieldset (with class="repeating_something"), roll20 will create a block on the sheet with the Add / Modify buttons. And the contents of the fieldset will be used for each row of the section. When you click the Add button, it'll create a new row using that as a template.

Roll20 will create the buttons that add/remove rows for you. You just have to create the fieldset with its class, and roll20 handles it for you.

But despite my usage of html scripts and JavaScripts, there's nothing to do ! I just can't implement the thing. I've been working on this for a while, so now i'm asking for you guys help.

Didn you look at the sourcecode of the Rogue Trader or Warhammer to try figure it out?

We have plenty of documentation on how Roll20 Sheets are creates, and repeating sections is mentioned on the main page Building Character Sheets. I really encourage you to look at the documentation, as it's being constantly updated, and details most things that go into making one. Roll20 sheets have enough unique features that you can't get far without looking at the documentation and see how things differ from standard HTML/CSS/JS.

Thank you for your answers guys. That went faster that i could expected ! I'll try this as soon as possible. I did tried to check Rogue Trader code by downloading it from Git, but the code i obtained was written in ONE line X)  Not the best display in order to read it !

Anyway, i'll check the repeating sections. Sounds like what i was searching for. I'll tell you if i find my happiness !

Bastodon said:
I did tried to check Rogue Trader code by downloading it from Git, but the code i obtained was written in ONE line X) Not the best display in order to read it !

google html formatter and you'll find quick tools to format the code into a readable form.

Ok. I just tried, and it seems to work good ! Now i'm trying to implement my style to the table with the reapeat class. I think i'm good for now ! Thank you a lot, guys !

Also, i will try to use html formatter next time. Could be a good use for my future projects.