[英]How to hide table header row if no child rows, but show header row again if button clicked
我有一個包含現有作業的表,並且有一個按鈕,如果用戶想添加另一個作業,則可以向該表添加新行。 當用戶首次單擊“添加新”按鈕時,標題將出現在第一行上方。 還有刪除行的選項,這就是我的問題所在。
如果用戶刪除他們添加的所有行,我希望標題行消失,但是問題是當用戶再次單擊“添加新”按鈕時,標題行再次出現。
我嘗試將顯示設置為無,但效果很好,但是當用戶再次開始添加行時,標題不會出現。 將可見性設置為隱藏也可以,但是隨后您會看到標題應位於的空白區域。 我還嘗試將if語句添加到第一次顯示標題行的位置(如果設置為none則將其設置為table-row),但是Add New根本不起作用。
我無法使用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) {
.
.
.
}
}
編輯:添加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>
我要做的是計算動態創建的表中的行數,如果表中有一行(標題行),則將顯示設置為無。 這使標題行消失了。
$(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) {
.
.
}
});
然后,在添加新行的函數中,我檢查了標題行的值是否設置為none,如果是,則將其設置為“ 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) {
.
.
.
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.