How to hide table header row if no child rows, but show header row again if button clicked

Question

I have a table with existing jobs and have a button to add new rows to that table if the user wants to add another job. When the user first clicks on the Add New button, a header appears above the first row. There is also the option of removing rows and this is where my problem comes in.

I want the header row to disappear if the user deletes all the rows that they added, but the problem is getting the header row to show up again when the user clicks the Add New button again.

I tried setting the display to none, which worked fine, but when the user starts adding rows again, the header doesn't appear. Setting visibility to hidden works too, but then you see an empty space where the header should be. I also tried adding an if statement to where the header row is displayed for the first time (setting it to table-row if set to none), but then the Add New didn't work at all.

I cannot use jQuery because the page uses MooTools and they conflict. I am very new at MooTools and fairly new to JavaScript, so if someone could point me in the right direction, I would be most grateful.

$(document.body).addEvent('click:relay(.delete-row)', function (e, el) {
                try {
                    e.preventDefault();
                    .
                    .
                    .
                            if (document.getElementById('addNewJobHeader').style.display !== 'none' && el.get('data-row-id') === '1') {
                                document.getElementById('addNewJobHeader').setStyle('display', 'none');
                            }
                            rewriteeditingselections();
                        } else {
                            .
                            .
                            .
                        }
                    }
                } catch (e) {
                    .
                    .
                    .
                }
            });

            function showHeaderRow() {
                showHeaderRow = function() {};
                Elements.from(connectjobheadertemplate({})).inject($('linkedJobsBody'));
            }

            function addChildJobRow() {
                try {
                    lastrow++;
                    let cl = (lastrow % 2 ? 'odd' : 'even');
                    showHeaderRow();
                    var refNum = '<?php echo $this->MJob->getNewJobRef(232); ?>';
                    Elements.from(connectedjobtemplate({
                        rownum: lastrow,
                        cl: cl,
                        ref: refNum,
                        nysid: '',
                        dinNum: '',
                        warrantNum: ''
                    })).inject($('linkedJobsBody'));
                } catch (e) {
                    .
                    .
                    .
                }
            }

EDIT: Adding HTML:

Table for existing jobs:

        <form method="post" id="linkedJobsForm" action="###" name="linkedJobsForm">
            <table width="100%">
                <thead>
                <tr class="odd">
                    <th align="center">Chk</th>
                    <th>Ref #</th>
                    <th>Pages</th>
                    <th>Order Date</th>
                    <th>NYSID</th>
                    <th>DIN#</th>
                    <th>Warrant Number</th>
                </tr>
                </thead>
                <tbody id="linkedJobsBody">
                                            <tr id="connectjobrow0" class="tc ec" data-row-id="0" data-connected-job="44752">
                            <td width="50" align="center">
                                <input type="checkbox" name="copyid[]" value="44752"  />
                            </td>
                            <td>
                                <a href="###" id="jobReference[0]" name="connectedjob[0][jobReference]"title="###">###</a>                                </td>
                            <td>
                                <input style="background-color: transparent; border: none;" type="text"
                                    data-row-id="0" id="pages[0]"
                                    name="connectedjob[0][pages]" onkeyup="setPages(this.value, this.id)"
                                    value="53" class="pages" size="3"/>
                            </td>
                            <td>
                                <input style="background-color: transparent; border: none;" type="text"
                                    data-row-id="0" id="date[0]"
                                       name="connectedjob[0][orderDate]" onblur="reformatDate(this.value, this.id)"
                                       value="Dec 16, 2015" class="datefield orderDate" size="10">
                            </td>
                            <td>
                                <input style="background-color: transparent; border: none;" type="text"
                                    data-row-id="0" id="pages[0]"
                                    name="connectedjob[0][nysid]" class="nysid" onkeyup="setNYSId(this.value, this.id)"
                                       data-row-id="0" id="nysid[0]"
                                       name="connectedjob[0][nysid]" class="nysid"
                                    value="11991495H">
                            </td>
                            <td>
                                <input style="background-color: transparent; border: none;" type="text"
                                    data-row-id="0" id="pages[0]"
                                    name="connectedjob[0][dinNum]" class="dinNum" onkeyup="setDinNum(this.value, this.id)"
                                       data-row-id="0" id="dinNum[0]"
                                       name="connectedjob[0][dinNum]" class="dinNum"
                                    value="13R2708">
                            </td>
                            <td>
                                <input style="background-color: transparent; border: none;" type="text" onkeyup="setWarrantNum(this.value, this.id)"
                                    data-row-id="0" id="pages[0]"
                                    name="connectedjob[0][warrantNum]" class="warrantNum"
                                    value="0739791">
                            </td>
                        </tr>
                   </tbody>
            </table>

Buttons:

            <div style="float: right;"><button id="add-new-row" style="text-align:center;margin-top:5px;width:85px;" class="boxbutton">Add New</button>&nbsp;<button style="text-align:center;margin-top: 5px; width: 60px;" id="save" class="boxbutton">Save</button></div><br>            </form>

Templates:

        <script id="connectjobheadertemplate" type="text/plain">
            <table>
                <tr class="odd even" id="addNewJobHeader" style="display:table-row;">
                    <td colspan="7">
                        <table width="100%" style="border:0px;border-style:hidden;">
                            <thead>
                                <tr>
                                    <th style="width: 15%;">Name</th>
                                    <th style="width: 15%;">Ref #</th>
                                    <th style="width: 5%;">Pages</th>
                                    <th style="width: 15%;">Order Date</th>
                                    <th style="width: 15%;">NYSID</th>
                                    <th style="width: 15%;">DIN#</th>
                                    <th style="width: 15%;">Warrant Number</th>
                                    <th style="width: 4%;"></th>
                                </tr>
                            </thead>
                        </table>
                    </td>
                </tr>
            </table>
        </script>
        <script id="connectedjobtemplate" type="text/template">
            <tr id="childjobrow1" class="odd" data-row-id="1">
                <td colspan="7">
                    <table width="100%" style="border:0px;border-style:hidden;">
                        <tr>
                            <td style="width: 15%;">
                                <input class="childjobid" type="hidden" id="childjobid1" name="childjobid[1][transcribername]" value="0" />
                                <input type="hidden" id="transcriberid[1]" name="childjobid[1][transcriberid]" value="" />
                                <input data-row-id="1" id="assignee[1]" name="childjobid[1][transcribername]" class="" list="transcribers" autocomplete="off" value="" placeholder="Name" size="14" />
                            </td>
                            <td style="width: 15%;">
                                <input data-row-id="1" id="reference[1]" name="childjobid[1][reference]" value="" class="ref" size="14" style="background-color: transparent; border: none;" />
                            </td>
                            <td style="width: 5%;">
                                <input data-row-id="1" id="pages[1]" name="childjobid[1][pages]" value="" class="" style="" size="1"/>
                            </td>
                            <td style="width: 15%;">
                                <input data-row-id="1" id="orderDate[1]" name="childjobid[1][orderDate]" value="" class="" type="date" size="14" />
                            </td>
                            <td style="width: 15%;">
                                <input data-row-id="1" id="nysid[1]" name="childjobid[1][nysid]" value="" class="" size="14" />
                            </td>
                            <td style="width: 15%;">
                                <input data-row-id="1" id="dinNum[1]" name="childjobid[1][dinNum]" value="" class="" size="14" />
                            </td>
                            <td style="width: 15%;">
                                <input data-row-id="1" id="warrantNum[1]" name="childjobid[1][warrantNum]" value="" class="" size="14" />
                            </td>
                            <td style="width: 5%;align:center;">
                                <button data-row-id="1" id="0" class="delete-row" style="text-align:center;margin-top: 5px;width:30px;color: #fff;background-color: #b9534f !important;padding: 5px 10px;font-size: 12px;line-height: 1.5;border-style: none;">X</button>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </script>

Answer 1

What I did was to count the number of rows in the dynamically created table and set the display equal to none if there was one row in the table (the header row). That made the header row disappear.

$(document.body).addEvent('click:relay(.delete-row)', function (e, el) {
                try {
                    e.preventDefault();
                    var childjobid = parseInt(el.id);
                    var rowid = el.get('data-row-id');
                    if (confirm('This will immediately DELETE the current line.\nAre you sure?')) {
                        if (childjobid === 0) {
                            $('childjobrow' + el.get('data-row-id')).remove();
                            var rowsInTable = document.getElementById('newChildJobTable').rows.length;
                            if (rowsInTable === 1) document.getElementById('addNewJobHeader').style.display = 'none';
                            if ($('addNewJobHeader').style.display === 'none') {
                                $('newChildJobTable').setStyle('display', 'none');
                            }
                            rewriteeditingselections();
                        } else {
                            .
                            .
                            .
                        }
                    }
                } catch (e) {
                    .
                    .
                }
            });

Then, in the function to add a new row, I checked if the value of the header row was set to none and, if so, set it to 'table-row'.

function addChildJobRow() {
                try {
                    lastrow++;
                    let cl = (lastrow % 2 ? 'odd' : 'even');
                    showHeaderRow();
                    if (document.defaultView.getComputedStyle(document.getElementById('addNewJobHeader'), '').getPropertyValue("display") === 'none') {
                        $('addNewJobHeader').style.display = 'table-row';
                    }
                    var refNum = '<?php echo $this->MJob->getNewJobRef(232); ?>';
                    Elements.from(connectedjobtemplate({
                        rownum: lastrow,
                        cl: cl,
                        ref: refNum,
                        nysid: '',
                        dinNum: '',
                        warrantNum: ''
                    })).inject($('newChildJobTable'));
                    $('newChildJobTable').setStyle('display', 'table');
                } catch (e) {
                    .
                    .
                    .
                }
            }