以编程方式将按钮移动到另一个tr

Question

我有一个登录表单，它使用ASP.NET应用程序中的<table>设计。

客户端是通过询问周围的几个UI控件移动到修改布局。他们想要将Login Password（忘记密码）链接移到Login（登录）按钮下方，以便它们分开放置。

然而，对于所有其他客户端，一切都需要保持不变，因此，如果任何CSS或样式的变化需要做的，我需要以编程方式做到这一点。有没有简单的方法来做到这一点？

我试图避免创建重复的用户控件来适应他们想要的布局，然后根据客户端隐藏/显示控件。

<table style="TABLE-LAYOUT: fixed; WIDTH: 370px;"> 
    <COLGROUP> 
    <COL width="120px"> 
    <COL width="250px"> 
    </COLGROUP> 
    <tr> 
    <td>Username:</td> 
    <td><input type="text" name="username"></td> 
    </tr> 
    <tr> 
    <td>Password:</td> 
    <td><input type="text" name="password"></td> 
    </tr> 

    <tr> 
    <td>&nbsp;</td> 
    <td> 
     <table> 
     <tr> 
      <td style="text-align:right;"> 
      <a href="url">Forgot Password</a> 
      </td> 
      <td> 
      <button type="submit">Login</button> 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table> 

JSfiddle Demo

编辑：jQuery的不允许的。 JavaScript确定。

Answer 1

你可以用jQuery来存档。

这里是移动的按钮退一步

$(document).ready(function() { 
 
    var loginLayOut = $(".login"); // login Table 
 
    var btnTd = loginLayOut.find("button").parent(); // button container, in this case its td 
 
    var tbody = btnTd.parent().parent(); // we get the tbody by moving two step back 
 
    var tr = $("<tr></tr>");  // create a new tr 
 
    tr.append(btnTd);   // append the td to the new created tr 
 
    tbody.prepend(tr);   // insert the tr to the tbody at position 0 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class='login' style="TABLE-LAYOUT: fixed; WIDTH: 370px;"> 
 
    <COLGROUP> 
 
    <COL width="120px"> 
 
    <COL width="250px"> 
 
    </COLGROUP> 
 
    <tr> 
 
    <td>Username:</td> 
 
    <td><input type="text" name="username"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Password:</td> 
 
    <td><input type="text" name="password"></td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td> 
 
     <table> 
 
     <tr> 
 
      <td style="text-align:right;"> 
 
      <a href="url">Forgot Password</a> 
 
      </td> 
 
      <td> 
 
      <button type="submit">Login</button> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

的Jquery可以为你做到这一点的例子。该代码可能是这个样子：

$("#toggle").click(toggleButtonPosition); 
 

 
function toggleButtonPosition() { 
 
    var buttonRow = $("button[type=submit]").closest("tr"), buttonCell, newTR, tr; 
 

 
    if (buttonRow.find("td").length === 2) { 
 
    // the table is in its initial configuration. Need to extract the button cell and add it to a new row 
 
    buttonCell = buttonRow.find("button").closest("td"); 
 
    buttonCell.remove(); 
 

 
    newTR = $("<tr />").append(buttonCell); 
 

 
    newTR.insertBefore(buttonRow); 
 
    } else { 
 
    // Reverse the process 
 
    buttonCell = buttonRow.find("td"); 
 

 
    tr = buttonRow.siblings().first(); 
 

 
    tr.append(buttonCell); 
 

 
    buttonRow.remove(); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table style="TABLE-LAYOUT: fixed; WIDTH: 370px;"> 
 
    <COLGROUP> 
 
    <COL width="120px"> 
 
    <COL width="250px"> 
 
    </COLGROUP> 
 
    <tr> 
 
    <td>Username:</td> 
 
    <td><input type="text" name="username"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Password:</td> 
 
    <td><input type="text" name="password"></td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td> 
 
     <table> 
 
     <tr> 
 
      <td style="text-align:right;"> 
 
      <a href="url">Forgot Password</a> 
 
      </td> 
 
      <td> 
 
      <button type="submit">Login</button> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<a href="javascript:void(0);" id="toggle">Toggle Button Position</a>

Answer 3

您不必重复布局。你可以通过添加/删除CSS类，这取决于使用jQuery或JavaScript的客户端。

$(document).ready(function(){ 
var client1 = true; // variable to store client 
if(client1){ 
    $('button').removeClass('client2').addClass('client1'); 
} 
else { 
$('button').removeClass('client1').addClass('client2'); 
}}); 

根据客户端添加/删除按钮的Css类。我已将'client1'css类放在按钮上。

button.client1{display:block;margin:0 auto} 
button.client2{float:right;margin-left:4px} 

的HTML代码如下：因为是不允许的jQuery

<table style="TABLE-LAYOUT: fixed; WIDTH: 370px;"> 
<COLGROUP> 
    <COL width="120px"> 
    <COL width="250px"> 
</COLGROUP> 
<tr> 
    <td>Username:</td> 
    <td><input type="text" name="username"></td> 
</tr> 
<tr> 
    <td>Password:</td> 
    <td><input type="text" name="password"></td> 
</tr> 
<tr> 
    <td>&nbsp;</td> 
    <td> 
    <table> 
    <tr> 
     <td> 
     <button type="submit" class='client1'>Login</button> 
     <a href="url">Forgot Password</a>    
     </td>   
    </tr> 
    </table> 
    </td> 
</tr>