Question

使用JavaScript，我会在满足条件时将HTML附加到表中。满足条件时，我想在表格行的右侧放置一个按钮。目前，我可以使用td标记将该按钮附加到该行，但是该按钮将采用它所在行的所有样式。相反，我已将按钮添加到我想要的新行中喜欢放在上面一排的右侧。

下面是为按钮添加新行的HTML：

<!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="&amp;XMLDATA=1&amp;RowLimit=0&amp;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}&amp;SortField=LinkTitle&amp;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 &amp;&amp; typeof MSPointerEvent != 'undefined' &amp;&amp; Number(pointerType) != MSPointerEvent.MSPOINTER_TYPE_MOUSE) { ListHeaderTouchHandler(event); return false; } return OnClickFilter(this, event);"
              href="javascript: " sortingfields="View={d6e09364-57b6-41a5-9f90-80d7812d5569}&amp;SortField=LinkTitle&amp;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}&amp;SortField=Status&amp;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 &amp;&amp; typeof MSPointerEvent != 'undefined' &amp;&amp; Number(pointerType) != MSPointerEvent.MSPOINTER_TYPE_MOUSE) { ListHeaderTouchHandler(event); return false; } return OnClickFilter(this, event);"
              href="javascript: " sortingfields="View={d6e09364-57b6-41a5-9f90-80d7812d5569}&amp;SortField=Status&amp;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}&amp;SortField=Priority&amp;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 &amp;&amp; typeof MSPointerEvent != 'undefined' &amp;&amp; Number(pointerType) != MSPointerEvent.MSPOINTER_TYPE_MOUSE) { ListHeaderTouchHandler(event); return false; } return OnClickFilter(this, event);"
              href="javascript: " sortingfields="View={d6e09364-57b6-41a5-9f90-80d7812d5569}&amp;SortField=Priority&amp;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}&amp;SortField=DueDate&amp;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 &amp;&amp; typeof MSPointerEvent != 'undefined' &amp;&amp; Number(pointerType) != MSPointerEvent.MSPOINTER_TYPE_MOUSE) { ListHeaderTouchHandler(event); return false; } return OnClickFilter(this, event);"
              href="javascript: " sortingfields="View={d6e09364-57b6-41a5-9f90-80d7812d5569}&amp;SortField=DueDate&amp;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}&amp;SortField=PercentComplete&amp;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 &amp;&amp; typeof MSPointerEvent != 'undefined' &amp;&amp; Number(pointerType) != MSPointerEvent.MSPOINTER_TYPE_MOUSE) { ListHeaderTouchHandler(event); return false; } return OnClickFilter(this, event);"
                href="javascript: " sortingfields="View={d6e09364-57b6-41a5-9f90-80d7812d5569}&amp;SortField=PercentComplete&amp;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&amp;ListId=%7BC23BD4E4%2DE8EF%2D4666%2DBE60%2D1CBB5B6645F4%7D&amp;ID=1&amp;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&amp;ListId=%7BC23BD4E4%2DE8EF%2D4666%2DBE60%2D1CBB5B6645F4%7D&amp;ID=4&amp;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>

我该如何制作

  <tr>
    <td><button style="background-color: #00539B; border: 1px solid #00539B; color: white; border-radius: 4px;" onclick="test(1)">1</button></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>

显示在其上方行的右侧而不将其添加为行中的td？

我为该行尝试了float:right，并将<tr><td></td></tr>替换为<span>。

Answer 1

你可以随时都有#1 let testString1: NSString = "This is a test of a @single prepended word" let testString2: NSString = "This is a test of a @two @prepended words" let regEx = try? NSRegularExpression(pattern: "\\@\\w+") let results = regEx?.matches(in: String(testString2), options: [], range: NSMakeRange(0, testString2.length)) for result in results! { let word = testString2.substring(with: result.range) // #2 print(word) }，没有按钮就空了。当满足条件时，只需使用按钮代码填充此<td class="styling-class">即可。在你的.css文件中，你已经有了适当的样式。（并且当你添加新行时，行中的<td>不会破坏你的行，并且每行中将有不同的td计数）

Answer 2

<td>上没有col-span。

假设每行有7个单元格。

<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>

或者，如果您想尝试避免float: right;看看这是否足够。您可能需要添加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>

----编辑

要将其排成所需行的右侧，您需要通过JS添加<td>，并确保在顶部或最后<th>添加th应该看起来像<th col-span="2">...</th>

就个人而言，会像<th col-span="2">...</th>那样制作最后一个标题，然后在需要时在此处添加空白<td>。

将按钮附加到表格行

2 个答案: