如何在没有 child 行时隐藏 table header 行，但在单击按钮时再次显示 header 行
How to hide table header row if no child rows, but show header row again if button clicked
我有一个包含现有作业的 table，如果用户想要添加另一个作业，我有一个按钮可以向 table 添加新行。当用户第一次单击“添加新”按钮时，第一行上方会出现 header。还有删除行的选项，这就是我的问题所在。
如果用户删除了他们添加的所有行，我希望 header 行消失，但问题是当用户单击添加新行时 header 行再次显示再次按钮。
我尝试将显示设置为 none，效果很好，但是当用户再次开始添加行时，header 没有出现。设置隐藏的可见性也有效，但是您会在 header 应该出现的地方看到一个空的 space。我还尝试在首次显示 header 行的位置添加一个 if 语句（如果设置为 none，则将其设置为 table-row），但随后添加新行不起作用完全没有。
我无法使用 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:
Table 现有职位：
<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>
我所做的是计算动态创建的 table 中的行数，如果 table 中只有一行（header行）。这使得 header 行消失了。
$(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) {
.
.
}
});
然后，在添加新行的函数中，我检查了 header 行的值是否设置为 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) {
.
.
.
}
}
我有一个包含现有作业的 table，如果用户想要添加另一个作业，我有一个按钮可以向 table 添加新行。当用户第一次单击“添加新”按钮时，第一行上方会出现 header。还有删除行的选项，这就是我的问题所在。
如果用户删除了他们添加的所有行，我希望 header 行消失，但问题是当用户单击添加新行时 header 行再次显示再次按钮。
我尝试将显示设置为 none，效果很好，但是当用户再次开始添加行时，header 没有出现。设置隐藏的可见性也有效，但是您会在 header 应该出现的地方看到一个空的 space。我还尝试在首次显示 header 行的位置添加一个 if 语句（如果设置为 none，则将其设置为 table-row），但随后添加新行不起作用完全没有。
我无法使用 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:
Table 现有职位：
<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>
我所做的是计算动态创建的 table 中的行数，如果 table 中只有一行（header行）。这使得 header 行消失了。
$(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) {
.
.
}
});
然后，在添加新行的函数中，我检查了 header 行的值是否设置为 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) {
.
.
.
}
}