У меня есть таблица с существующими заданиями и кнопка для добавления новых строк в эту таблицу, если пользователь хочет добавить другое задание. Когда пользователь впервые нажимает кнопку «Добавить новый», над первой строкой появляется заголовок. Существует также возможность удаления строк, и тут возникает моя проблема.
Я хочу, чтобы строка заголовка исчезала, если пользователь удаляет все добавленные строки, но проблема в том, что строка заголовка снова появляется, когда пользователь снова нажимает кнопку Добавить новую.
Я попытался установить для дисплея значение none, что работало нормально, но когда пользователь снова начинает добавлять строки, заголовок не появляется. Настройка видимости скрытых тоже работает, но тогда вы видите пустое место, где должен быть заголовок. Я также попытался добавить оператор if, где строка заголовка отображается в первый раз (установив его в строку таблицы, если задано значение none), но затем Добавить новый вообще не сработало.
Я не могу использовать jQuery, потому что страница использует MooTools, и они конфликтуют. Я очень новичок в MooTools и довольно плохо знаком с JavaScript, поэтому, если кто-то может указать мне правильное направление, я буду очень признателен.
$(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:
Добавление HTML:
Таблица для существующих рабочих мест:
<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>
Кнопка:
<div style="float: right;"><button id="add-new-row" style="text-align:center;margin-top:5px;width:85px;" class="boxbutton">Add New</button> <button style="text-align:center;margin-top: 5px; width: 60px;" id="save" class="boxbutton">Save</button></div><br> </form>
Шаблоны:
<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>