Jquery 以不同的形式显示引导按钮和其他要内联的元素

我尝试内联显示两个按钮（保存和删除），虽然这里有很多类似的问题，但这些解决方案都不适合我

我怀疑这是因为我的表格中有太多内容。
我尝试使用

style=“float:left；width:auto”

但没有效果

非常感谢您的建议。谢谢

<form id="roadmapR" method="post" action="/roadmap/save.html" style="float:left; width: auto">
  <input type="hidden" class="roadmapData" name="roadmapData" value="">
  <table id="roadmapTable">
    <tr>
      <td>
        <p>126 Errors Found. <span id="rowErrors"></span> rows have errors.  &nbsp;&nbsp;&nbsp; Show Errors <input type="checkbox" id="showErrors" checked></p>
      </td>
    </tr>
    <tr>
      <td><div id="errors" class="hot handsontable htRowHeaders htColumnHeaders"style="height: 220px; overflow: hidden; width: 1400px;" data-originalstyle="height: 220px; overflow: hidden; width: 1000px;"></div></td>
    </tr>
    <tr><td></td></tr>
    <tr><td></td></tr>
    <tr>
      <td align="left"><input type="text" id="search" placeholder="Search Roadmap for..." required> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Filter Roadmap to only show errors <input type="checkbox" id="showRoadmapErrors">
      </td>
    </tr>
    <tr>
      <td>
        <div>
          <table id="filterTable">
            <tr>
              <td align="left">
                <table id="filterResetTable">
                  <tr>
                    <td>
                      <button id="resetBtn" type="button" class="btn btn-roadmap" >Reset</button>&nbsp;&nbsp;
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <button id="filterBtn" type="button" class="btn btn-roadmap" >Filter</button>&nbsp;&nbsp;
                    </td>
                  </tr>
                </table>
              </td>
              <td>
                <div class="form-filter">
                  <select name="filter1_category" id="filter1_category">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                  </select>
                  &nbsp;&nbsp;&nbsp;
                  <select multiple name="filter1_value" id="filter1_value">
                  </select>
                </div>
              </td>
              <td>
                <div class="form-filter">
                  <select name="filter2_category" id="filter2_category">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                  </select>
                  &nbsp;&nbsp;&nbsp;
                  <select multiple name="filter2_value" id="filter2_value">
                  </select>
                </div>
              </td>
              <td>
                <div class="form-filter">
                  <select name="filter3_category" id="filter3_category">
                    <option value="" disabled selected hidden>Select Your Filter...</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                  </select>
                  &nbsp;&nbsp;&nbsp;
                  <select multiple name="filter3_value" id="filter3_value">
                  </select>
                </div>
              </td>
            </tr>
            <tr><td>
              &nbsp;
              </td></tr>
          </table>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <p>
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p>Your Roadmap Information, 40 total rows; <span id="filterCount"></span> filter rows:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button type="button" class="btn btn-roadmap  saveChanges" style="height:42px" disabled>Save</button>
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p><span id="fatalErrorMessage" style="color:red;"></span>
      </td>
    </tr>
  </table>
</form>
<form id="roadmapD" method="post" action="/roadmap/delete.html" style="float:left; width: auto">
  <input type="hidden" class="deleteData" name="deleteData" value="">
  <table id="roadmapGridTable">
    <tr>
      <td>
        <button type="button" class="btn btn-roadmap deleteChanges"  style="height:42px" enabled>Delete</button>
      </td>
    </tr>
    <tr>
      <td><div id="tableTotals" class="hot handsontable htRowHeaders htColumnHeaders"style="height: 2000px; overflow: hidden; width: 3000px; " data-originalstyle="height: 220px; overflow: hidden; width: 900px; "></div><div id="dialog" title="Error Found"><p></p></div>
      </td>
    </tr>
  </table>
</form>

发现126个错误。行有错误。显示错误

筛选路线图以仅显示错误
重置
滤器
1.
2.
3.
1.
2.
3.
选择你的过滤器。。。
1.
2.
3.


您的路线图信息，共40行；筛选行：
拯救


删除

---

这里是我所拥有的东西的一部分

您的按钮不在同一个“容器”元素中…
如果不更改HTML标记，就无法内联发布它们

试试这个：

<tr>
  <td>
    <p>Your Roadmap Information, 40 total rows; <span id="filterCount"></span> filter rows:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <button type="button" class="btn btn-roadmap  saveChanges" style="height:42px" disabled>Save</button>
      <button type="button" class="btn btn-roadmap deleteChanges"  style="height:42px" enabled>Delete</button>
    </p>
  </td>
</tr>

---

这解决了按钮内联的问题。但我最初将按钮放在不同的形式中，因为它们执行不同的post操作

save.html

与

delete.html

相比。我不明白上面的解决方案如何解决这个问题？ajax是正确的解决方案而不是jquery函数吗？

$(".saveChanges").on("click",function(){
  alert("The form with id 'roadmapR' is submitting.");
  $("#roadmapR").submit();
});

$(".deleteChanges").on("click",function(){
  alert("The form with id 'roadmapD' is submitting.");
  $("#roadmapD").submit();
});