Question

我想在表格的行数末尾添加一个按钮，等于5。我写了这样的话：

<div class="right-side">
  <div class="log-in" style="height:1100px">
    <div class="title clearfix">
      <p>Gallery</p>
    </div>
    <form id="ab" name="ab">
      <div style="float:left;width:190px">
        <table id ="myTable">
          @foreach(var g in @ViewBag.gallery)
          {
          <tr>
            <td style="padding-right :50px"><img src="@g.imgpath" style="width:200px;height:200px"/></td>
            <td style="padding-left :50px"><div class="side-row"><a>@g.idescr</a></div></td>
            <td style="padding-left :50px"><a class="button" href="#"><img src='../images/chg-img.png'/></a></td>
          </tr>
        }
      </table>
      <script>var rowCount = $('#myTable tr').length;
        if(rowCount==5) 
        {
          var element = document.createElement("input");
          element.setAttribute("type", "file");
          element.setAttribute("class", "button");
          element.setAttribute("name", "button3");
          document.ab.appendChild(element);      
        }
      </script>
    </div>
  </form>
</div>  
</div>

但是孩子在页面开头添加，为什么？

Answer 1

而不是附加到表单上尝试：

$("#myTable").parent().append(element);

Answer 2

这样做：

</tr>
     }
     </table>
     @if(ViewBag.gallery.Count == 5){
         <input ......./>
      }

Answer 3

假设你有jquery，请尝试以下内容：

取代：

var rowCount = $('#myTable tr').length;
       if(rowCount==5) 
       {
           var element = document.createElement("input");
           element.setAttribute("type", "file");
           element.setAttribute("class", "button");
           element.setAttribute("name", "button3");
           document.ab.appendChild(element);      
       }

使用：

$("#myTable tr").eq(4).after( $('<input/>', { "type": "file", "name": "button3"}).addClass("button"));

Answer 4

您可以像

一样使用它

HTML

<table id="myTable">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
</table>

的Javascript

$(document).ready(function(){
    $("<input type='file'/>").insertAfter($('table#myTable tr:nth-child(5)'))
});

工作小提琴here

在页面末尾添加它

4 个答案: