cfoster5
Reputation: 1826
Append button to table row
Using JavaScript, I am appending HTML to a table when conditions are met. When conditions are met, I'd like to place a button to the right of a table's row. Currently, I can append the button to the row by using a td tag, however the button would take on all styling of the row it is in. Instead, I have added the button to a new row that I'd like to place to the right side of its row above.
Below is HTML that adds a new row for the button:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table onmousedown="return OnTableMouseDown(event);" summary="JSLinkTesting" xmlns:o="urn:schemas-microsoft-com:office:office" o:webquerysourcehref="&XMLDATA=1&RowLimit=0&View=%7BD6E09364%2D57B6%2D41A5%2D9F90%2D80D7812D5569%7D" border="0"
cellspacing="0" dir="none" cellpadding="1" id="{C23BD4E4-E8EF-4666-BE60-1CBB5B6645F4}-{D6E09364-57B6-41A5-9F90-80D7812D5569}" class="ms-listviewtable" view="D6E09364-57B6-41A5-9F90-80D7812D5569">
<thead role="presentation" id="js-listviewthead-WPQ2">
<tr valign="top" role="row" class="ms-viewheadertr ms-vhltr">
<th class="ms-headerCellStyleIcon ms-vh-icon ms-vh-selectAllIcon" scope="col" role="columnheader"><span class="ms-selectall-span" tabindex="0" id="cbxSelectAllItems47" title="Select and deselect all items" role="checkbox" aria-checked="false" aria-label="Press space key to select all items on this list"><span tabindex="-1" class="ms-selectall-iconouter"><img class="ms-selectall-icon" alt="" src="/_layouts/15/images/spcommon.png?rev=40"></span></span>
</th>
<th scope="col" role="columnheader" style="max-width: 500px;" class="ms-vh2" onmousedown="ListModule.Util.headerMenuMouseDown(this);">
<div sortable="" sortdisable="" filterdisable="" filterable="" filterdisablemessage="" name="LinkTitle" ctxnum="47" displayname="Task Name" fieldtype="Computed" resulttype="" sortfields="View={d6e09364-57b6-41a5-9f90-80d7812d5569}&SortField=LinkTitle&SortDir=Asc"
class="ms-vh-div"><a class="ms-headerSortTitleLink" id="diidSort47LinkTitle" onfocus="OnFocusFilter(this)" onclick="javascript: WriteDocEngagementLog('Documents_SortColumnClick', 'OneDrive_SortColumnClick'); var pointerType = this.getAttribute('pointerType'); if (pointerType != null && typeof MSPointerEvent != 'undefined' && Number(pointerType) != MSPointerEvent.MSPOINTER_TYPE_MOUSE) { ListHeaderTouchHandler(event); return false; } return OnClickFilter(this, event);"
href="javascript: " sortingfields="View={d6e09364-57b6-41a5-9f90-80d7812d5569}&SortField=LinkTitle&SortDir=Asc" title="Task Name, Click to sort by Task Name">Task Name</a><span class="ms-sortarrowdown-iconouter" id="diidSortArrowSpan47LinkTitle"
style="display: none;"><img class="ms-sortarrowdown-icon" src="/_layouts/15/images/spcommon.png?rev=40" alt=""></span><span class="ms-filter-iconouter" id="diidFilterSpan47LinkTitle" style="display: none;"><img class="ms-filter-icon" src="/_layouts/15/images/spcommon.png?rev=40" alt=""></span></div>
<div
class="ms-positionRelative">
<div class="s4-ctx"><span> </span>
<a class="ms-headerSortArrowLink" onclick="WriteDocEngagementLog('Documents_SortArrowClick', 'OneDrive_SortArrowClick'); PopMenuFromChevron(event); return false;"
href="javascript:;" title="Open Task Name sort and filter menu" aria-expended="false"><img style="visibility: hidden;" src="/_layouts/15/images/ecbarw.png?rev=40" alt="Open Task Name sort and filter menu" ms-jsgrid-click-passthrough="true"></a><span> </span></div>
</div>
</th>
<th role="presentation"></th>
<th scope="col" role="columnheader" style="max-width: 500px;" class="ms-vh2" onmousedown="ListModule.Util.headerMenuMouseDown(this);">
<div sortable="" sortdisable="" filterdisable="" filterable="" filterdisablemessage="" name="Status" ctxnum="47" displayname="Task Status" fieldtype="Choice" resulttype="" sortfields="View={d6e09364-57b6-41a5-9f90-80d7812d5569}&SortField=Status&SortDir=Asc"
class="ms-vh-div"><a class="ms-headerSortTitleLink" id="diidSort47Status" onfocus="OnFocusFilter(this)" onclick="javascript: WriteDocEngagementLog('Documents_SortColumnClick', 'OneDrive_SortColumnClick'); var pointerType = this.getAttribute('pointerType'); if (pointerType != null && typeof MSPointerEvent != 'undefined' && Number(pointerType) != MSPointerEvent.MSPOINTER_TYPE_MOUSE) { ListHeaderTouchHandler(event); return false; } return OnClickFilter(this, event);"
href="javascript: " sortingfields="View={d6e09364-57b6-41a5-9f90-80d7812d5569}&SortField=Status&SortDir=Asc" title="Task Status, Click to sort by Task Status">Task Status</a><span class="ms-sortarrowdown-iconouter" id="diidSortArrowSpan47Status"
style="display: none;"><img class="ms-sortarrowdown-icon" src="/_layouts/15/images/spcommon.png?rev=40" alt=""></span><span class="ms-filter-iconouter" id="diidFilterSpan47Status" style="display: none;"><img class="ms-filter-icon" src="/_layouts/15/images/spcommon.png?rev=40" alt=""></span></div>
<div
class="ms-positionRelative">
<div class="s4-ctx"><span> </span>
<a class="ms-headerSortArrowLink" onclick="WriteDocEngagementLog('Documents_SortArrowClick', 'OneDrive_SortArrowClick'); PopMenuFromChevron(event); return false;"
href="javascript:;" title="Open Task Status sort and filter menu" aria-expended="false"><img style="visibility: hidden;" src="/_layouts/15/images/ecbarw.png?rev=40" alt="Open Task Status sort and filter menu" ms-jsgrid-click-passthrough="true"></a><span> </span></div>
</div>
</th>
<th scope="col" role="columnheader" style="max-width: 500px;" class="ms-vh2" onmousedown="ListModule.Util.headerMenuMouseDown(this);">
<div sortable="" sortdisable="" filterdisable="" filterable="" filterdisablemessage="" name="Priority" ctxnum="47" displayname="Priority" fieldtype="Choice" resulttype="" sortfields="View={d6e09364-57b6-41a5-9f90-80d7812d5569}&SortField=Priority&SortDir=Asc"
class="ms-vh-div"><a class="ms-headerSortTitleLink" id="diidSort47Priority" onfocus="OnFocusFilter(this)" onclick="javascript: WriteDocEngagementLog('Documents_SortColumnClick', 'OneDrive_SortColumnClick'); var pointerType = this.getAttribute('pointerType'); if (pointerType != null && typeof MSPointerEvent != 'undefined' && Number(pointerType) != MSPointerEvent.MSPOINTER_TYPE_MOUSE) { ListHeaderTouchHandler(event); return false; } return OnClickFilter(this, event);"
href="javascript: " sortingfields="View={d6e09364-57b6-41a5-9f90-80d7812d5569}&SortField=Priority&SortDir=Asc" title="Priority, Click to sort by Priority">Priority</a><span class="ms-sortarrowdown-iconouter" id="diidSortArrowSpan47Priority"
style="display: none;"><img class="ms-sortarrowdown-icon" src="/_layouts/15/images/spcommon.png?rev=40" alt=""></span><span class="ms-filter-iconouter" id="diidFilterSpan47Priority" style="display: none;"><img class="ms-filter-icon" src="/_layouts/15/images/spcommon.png?rev=40" alt=""></span></div>
<div
class="ms-positionRelative">
<div class="s4-ctx"><span> </span>
<a class="ms-headerSortArrowLink" onclick="WriteDocEngagementLog('Documents_SortArrowClick', 'OneDrive_SortArrowClick'); PopMenuFromChevron(event); return false;"
href="javascript:;" title="Open Priority sort and filter menu" aria-expended="false"><img style="visibility: hidden;" src="/_layouts/15/images/ecbarw.png?rev=40" alt="Open Priority sort and filter menu" ms-jsgrid-click-passthrough="true"></a><span> </span></div>
</div>
</th>
<th class="ms-vh2" role="columnheader" scope="col" onmousedown="ListModule.Util.headerMenuMouseDown(this);">
<div sortable="" sortdisable="" filterdisable="" filterable="" filterdisablemessage="" name="DueDate" ctxnum="47" displayname="Due Date" fieldtype="DateTime" resulttype="" sortfields="View={d6e09364-57b6-41a5-9f90-80d7812d5569}&SortField=DueDate&SortDir=Asc"
class="ms-vh-div"><a class="ms-headerSortTitleLink" id="diidSort47DueDate" onfocus="OnFocusFilter(this)" onclick="javascript: WriteDocEngagementLog('Documents_SortColumnClick', 'OneDrive_SortColumnClick'); var pointerType = this.getAttribute('pointerType'); if (pointerType != null && typeof MSPointerEvent != 'undefined' && Number(pointerType) != MSPointerEvent.MSPOINTER_TYPE_MOUSE) { ListHeaderTouchHandler(event); return false; } return OnClickFilter(this, event);"
href="javascript: " sortingfields="View={d6e09364-57b6-41a5-9f90-80d7812d5569}&SortField=DueDate&SortDir=Asc" title="Due Date, Click to sort by Due Date">Due Date</a><span class="ms-sortarrowdown-iconouter" id="diidSortArrowSpan47DueDate"
style="display: none;"><img class="ms-sortarrowdown-icon" src="/_layouts/15/images/spcommon.png?rev=40" alt=""></span><span class="ms-filter-iconouter" id="diidFilterSpan47DueDate" style="display: none;"><img class="ms-filter-icon" src="/_layouts/15/images/spcommon.png?rev=40" alt=""></span></div>
<div
class="ms-positionRelative">
<div class="s4-ctx"><span> </span>
<a class="ms-headerSortArrowLink" onclick="WriteDocEngagementLog('Documents_SortArrowClick', 'OneDrive_SortArrowClick'); PopMenuFromChevron(event); return false;"
href="javascript:;" title="Open Due Date sort and filter menu" aria-expended="false"><img style="visibility: hidden;" src="/_layouts/15/images/ecbarw.png?rev=40" alt="Open Due Date sort and filter menu" ms-jsgrid-click-passthrough="true"></a><span> </span></div>
</div>
</th>
<th scope="col" role="columnheader" style="max-width: 500px;" class="ms-vh2" onmousedown="ListModule.Util.headerMenuMouseDown(this);">
<div sortable="" sortdisable="" filterdisable="" filterable="" filterdisablemessage="" name="PercentComplete" ctxnum="47" displayname="% Complete" fieldtype="Number" resulttype="" sortfields="View={d6e09364-57b6-41a5-9f90-80d7812d5569}&SortField=PercentComplete&SortDir=Asc"
class="ms-vh-div">
<div align="right" class="ms-numHeader"><a class="ms-headerSortTitleLink" id="diidSort47PercentComplete" onfocus="OnFocusFilter(this)" onclick="javascript: WriteDocEngagementLog('Documents_SortColumnClick', 'OneDrive_SortColumnClick'); var pointerType = this.getAttribute('pointerType'); if (pointerType != null && typeof MSPointerEvent != 'undefined' && Number(pointerType) != MSPointerEvent.MSPOINTER_TYPE_MOUSE) { ListHeaderTouchHandler(event); return false; } return OnClickFilter(this, event);"
href="javascript: " sortingfields="View={d6e09364-57b6-41a5-9f90-80d7812d5569}&SortField=PercentComplete&SortDir=Asc" title="% Complete, Click to sort by % Complete">% Complete</a><span class="ms-sortarrowdown-iconouter" id="diidSortArrowSpan47PercentComplete"
style="display: none;"><img class="ms-sortarrowdown-icon" src="/_layouts/15/images/spcommon.png?rev=40" alt=""></span><span class="ms-filter-iconouter" id="diidFilterSpan47PercentComplete" style="display: none;"><img class="ms-filter-icon" src="/_layouts/15/images/spcommon.png?rev=40" alt=""></span></div>
</div>
<div class="ms-positionRelative">
<div class="s4-ctx"><span> </span>
<a class="ms-headerSortArrowLink" onclick="WriteDocEngagementLog('Documents_SortArrowClick', 'OneDrive_SortArrowClick'); PopMenuFromChevron(event); return false;"
href="javascript:;" title="Open % Complete sort and filter menu" aria-expended="false"><img style="visibility: hidden;" src="/_layouts/15/images/ecbarw.png?rev=40" alt="Open % Complete sort and filter menu" ms-jsgrid-click-passthrough="true"></a><span> </span></div>
</div>
</th>
<th class="ms-vh-icon" scope="col" title=""><span class="ms-addcolumn-span" role="presentation"> </span></th>
</tr>
</thead>
<script id="scriptBodyWPQ2"></script>
<tbody>
<tr class=" ms-itmHoverEnabled ms-itmhover" oncontextmenu="return ShowCallOutOrECBWrapper(this, event, false)" iid="47,1,0" id="47,1,0" role="row">
<td class="ms-cellStyleNonEditable ms-vb-itmcbx ms-vb-imgFirstCell" tabindex="0" role="rowheader" aria-label="Select or deselect an item">
<div role="checkbox" class="s4-itm-cbx s4-itm-imgCbx" tabindex="-1" aria-checked="false"><span class="s4-itm-imgCbx-inner"><span class="ms-selectitem-span"><img class="ms-selectitem-icon" alt="" src="/_layouts/15/images/spcommon.png?rev=40"></span></span>
</div>
</td>
<td role="gridcell" class="ms-cellstyle ms-vb-title" isecb="TRUE" iscallout="TRUE" height="100%">
<div class="ms-vb itx" ctxname="ctx47" id="1" app=""><span style="float: left; margin-left:0px"><table><tbody><tr><td><a class="ms-listlink" onfocus="OnLink(this)" href="https://portal.oldnational.com/divisions/testing/_layouts/15/listform.aspx?PageType=4&ListId=%7BC23BD4E4%2DE8EF%2D4666%2DBE60%2D1CBB5B6645F4%7D&ID=1&ContentTypeID=0x0108007E8FE1AB05F4B74B8B0683F809D34CF0" onclick="EditLink2(this,47);return false;" target="_self">Test</a></td></tr></tbody></table></span></div>
</td>
<td class="ms-list-itemLink-td ms-cellstyle" role="gridcell">
<div class="ms-list-itemLink " onclick="ShowMenuForTrOuter(this,event, true); return false;">
<a ms-jsgrid-click-passthrough="true" class="ms-lstItmLinkAnchor ms-ellipsis-a" title="Open Menu dialog for selected item" aria-haspopup="true" aria-expanded="false" onclick="OpenCalloutAndSelectItem(this, event, this, '1'); return false;" href="#"
id="ctx47_1_calloutLaunchPoint"><img class="ms-ellipsis-icon" src="/_layouts/15/images/spcommon.png?rev=40" alt="Open Menu"></a>
</div>
</td>
<td role="gridcell" class="ms-cellstyle ms-vb2">Completed</td>
<td role="gridcell" class="ms-cellstyle ms-vb2">(2) Normal</td>
<td role="gridcell" class="ms-cellstyle ms-vb2"><span class="ms-noWrap" title="3/30/2018">3/30/2018</span></td>
<td role="gridcell" class="ms-vb-lastCell ms-cellstyle ms-vb2">
<div style="background: #F3F3F3; display:block; height: 15px; width: 120px;">
<div style="background: #00539B; height: 100%; width: 100%;"></div>
</div> 100 %</td>
</tr>
<tr>
<td><button style="background-color: #00539B; border: 1px solid #00539B; color: white; border-radius: 4px;" onclick="test(1)">1</button></td>
</tr>
<tr class="ms-alternating ms-itmHoverEnabled ms-itmhover" oncontextmenu="return ShowCallOutOrECBWrapper(this, event, false)" iid="47,4,0" id="47,4,0" role="row">
<td class="ms-cellStyleNonEditable ms-vb-itmcbx ms-vb-imgFirstCell" tabindex="0" role="rowheader" aria-label="Select or deselect an item">
<div role="checkbox" class="s4-itm-cbx s4-itm-imgCbx" tabindex="-1" aria-checked="false"><span class="s4-itm-imgCbx-inner"><span class="ms-selectitem-span"><img class="ms-selectitem-icon" alt="" src="/_layouts/15/images/spcommon.png?rev=40"></span></span>
</div>
</td>
<td role="gridcell" class="ms-cellstyle ms-vb-title" isecb="TRUE" iscallout="TRUE" height="100%">
<div class="ms-vb itx" ctxname="ctx47" id="4" app=""><span style="float: left; margin-left:0px"><table><tbody><tr><td><a class="ms-listlink" onfocus="OnLink(this)" href="https://portal.oldnational.com/divisions/testing/_layouts/15/listform.aspx?PageType=4&ListId=%7BC23BD4E4%2DE8EF%2D4666%2DBE60%2D1CBB5B6645F4%7D&ID=4&ContentTypeID=0x0108007E8FE1AB05F4B74B8B0683F809D34CF0" onclick="EditLink2(this,47);return false;" target="_self">Test2</a></td></tr></tbody></table></span></div>
</td>
<td class="ms-list-itemLink-td ms-cellstyle" role="gridcell">
<div class="ms-list-itemLink " onclick="ShowMenuForTrOuter(this,event, true); return false;">
<a ms-jsgrid-click-passthrough="true" class="ms-lstItmLinkAnchor ms-ellipsis-a" title="Open Menu dialog for selected item" aria-haspopup="true" aria-expanded="false" onclick="OpenCalloutAndSelectItem(this, event, this, '4'); return false;" href="#"
id="ctx47_4_calloutLaunchPoint"><img class="ms-ellipsis-icon" src="/_layouts/15/images/spcommon.png?rev=40" alt="Open Menu"></a>
</div>
</td>
<td role="gridcell" class="ms-cellstyle ms-vb2">In Progress</td>
<td role="gridcell" class="ms-cellstyle ms-vb2">(2) Normal</td>
<td role="gridcell" class="ms-cellstyle ms-vb2"><span class="ms-noWrap" title="3/19/2018">3/19/2018</span></td>
<td role="gridcell" class="ms-vb-lastCell ms-cellstyle ms-vb2">
<div style="background: #F3F3F3; display:block; height: 15px; width: 120px;">
<div style="background: #FFC824; height: 100%; width: 50%;"></div>
</div> 50 %</td>
</tr>
<tr>
<td><button style="background-color: #00539B; border: 1px solid #00539B; color: white; border-radius: 4px;" onclick="test(4)">4</button></td>
</tr>
</tbody>
</table>
</body>
</html>How can I make
<tr>
<td><button style="background-color: #00539B; border: 1px solid #00539B; color: white; border-radius: 4px;" onclick="test(1)">1</button></td>
</tr>
or
<tr>
<td><button style="background-color: #00539B; border: 1px solid #00539B; color: white; border-radius: 4px;" onclick="test(4)">4</button></td>
</tr>
display to the right of the row above it without adding it as a td in the row?
I have tried float:right for the row and replacing <tr><td></td></tr> with <span>.
Upvotes: 2
Views: 352
Answers (2)
pcasa
Reputation: 3730
You are missing col-span on the <td>.
Assuming 7 cells for each row.
<tr>
<td col-span="7"><button style="background-color: #00539B; border: 1px solid #00539B; color: white; border-radius: 4px; float: right;" onclick="test(4)">4</button></td>
</tr>
Or if you want to try to avoid the float: right; see if this will be enough. You might have to add text-align: right.
<tr>
<td col-span="6"></td>
<td><button style="background-color: #00539B; border: 1px solid #00539B; color: white; border-radius: 4px;" onclick="test(4)">4</button></td>
</tr>
---- EDIT
To line it up to the right, of the desired row, you need to add a <td> via JS and make sure you add a <th> on the top or the last th should look like <th col-span="2">...</th>
Personally, would make last header like <th col-span="2">...</th> and then add a blank <td> where you inject button here if needed.
Upvotes: 0
John Smith
Reputation: 160
You could have <td class="styling-class"> there all the time, just empty without the button. And when the conditions are met, just fill this <td> with button code. In your .css file you would already have appropriate styling for that. (And having <td> in the row all the time won't break your row when you add new one, and there will be different count of td's in each row)
Upvotes: 1
Related Questions
- How to add a BUTTON in to each HTML table rows using JAVASCRIPT
- Add a button dynamically in a HTML table row using vanilla javascript
- javascript im trying to append button to the end of each row in my table
- how to append a button to a table
- Add button dynamically to html table on row append to other table
- Easiest way to add a button on each row of a table HTML
- Adding a button to a table using Javascript
- Javascript to add button to next row in a table
- How to add a button next to a table row
- JQuery Add a Button in a Table Row