如何通过单击Javascript来使HTML TD设置为overflow：hiddenscroll隐藏滚动？

Question

我有一个HTML TD，溢出设置为隐藏。 它的宽度是850px，高度是567px。 内部内容的高度应为567px，宽度为1700px。 我希望用户能够单击JavaScript按钮，该按钮将TD内的下一个表滚动到视图中。 我怎样才能做到这一点？ 我已经尝试了document.getElementById("tilesDisplay").scrollBy(10,0)但是没有用。

<tr>
      <td style="margin:0px; padding:0px; width:100%;" cellpadding="0px" cellspacing="0px">
          <table style="margin:0px; padding:0px; width:100%; table-layout:fixed; overflow:hidden; white-space: nowrap;" cellpadding="0px" cellspacing="0px">
              <tr>
                  <td style="background-color:#000000; vertical-align:middle; text-align:left;" onmouseover="arrow(this,1,'left');" onmouseout="arrow(this,2,'left');" onclick="ChangePortfolioImage('left');">&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/general/arrow-left.png" style="width:25px; cursor:pointer;" /></td>
                  <td id="tilesDisplay" style="background-color:#000000; width:850px; height:567px; overflow:hidden; border:solid 1px #758264;">
                      <table>
                              <tr>
                              <td style="width:850px; height:567px;">
                                  <table style="width:850px; height:567px;">
                                      <tr>
                                          <%
                                          rowCount=0
                                          for i=1 to (ubound(theseImagesSplit)-1)
                                              if rowCount=3 or rowCount=6 then
                                                 rowCount=rowCount+1
                                                  response.Write("</tr><tr>")
                                              else
                                                  if rowCount=9 then
                                                      rowCount=1
                                                      response.Write("</tr></table></td><td style=""width:850px; height:567px;""><table style=""width:850px; height:567px;""><tr>")
                                                  else
                                                      rowCount=rowCount+1
                                                  end if
                                              end if

                                              RS.Open "Select * FROM Portfolio WHERE ID=" & theseImagesSplit(i),conn
                                                  tiID=RS("ID")
                                                  tiImageURL=RS("imageURL")
                                                  tiCaption=RS("caption")
                                                  tiFrontPic=RS("frontPic")
                                                  tiCollection=RS("collection")
                                              RS.Close

                                              if cInt(tiID)=cInt(firstImage) then
                                                  tiSummary="true"
                                                  tiBorder="#3c4534"
                                              else
                                                  tiSummary="false"
                                                  tiBorder="#bdc49f"
                                              end if
                                           %>
                                                      <td style="height:150px;"><center>
                                                          <table id="thumbnail<%=i %>" class="thumbnail" style="height:132px; width:198px; cursor:pointer; border:solid 1px <%=tiBorder %>;" summary="<%=tiSummary %>" onmouseover="this.style.border='solid 1px #3c4534';" onmouseout="thumbnailOut(this);" onclick="ChangePortfolioImage('<%=tiID %>'); updateThumbnailBorders(<%=(ubound(theseImagesSplit)-1) %>,<%=i %>);">
                                                              <tr>
                                                                  <td style="border:solid 3px #000000;"><img src="<%=tiImageURL %>" style="height:130px;" /></td>
                                                              </tr>
                                                          </table>
                                                      </center></td>
                                          <%
                                          next
                                           %>
                                      </tr>
                                  </table>
                              </td>
                          </tr>
                      </table>
                  </td>
                  <td style="background-color:#000000; vertical-align:middle; text-align:right;" onmouseover="arrow(this,1,'right');" onmouseout="arrow(this,2,'right');" onclick="ChangePortfolioImage('right');"><img src="../images/general/arrow-right.png" style="width:25px; cursor:pointer;" />&nbsp;&nbsp;&nbsp;&nbsp;</td>
              </tr>
          </table>
      </td>
  </tr>

Answer 1

我认为最简单的方法是使用相对放置的容器div并在按钮单击事件上偏移容器div的位置。

<table>
     <tr> <td>
          <div id="table-container"> <table class="subtable"> .... </table></div>
     </td> </tr>
</table>

cont = document.getElementById('table-container');
offset = 850; // Or whatever the width of the subtable

 <input onClick = "cont.style.left = cont.style.left - offset;">