Question

我在ASP.NET应用程序中使用mdx设计了一个登录表单。

客户要求通过移动几个UI控件来修改布局。他们想要在“登录”按钮下方移动“忘记密码”链接，使它们位于不同的行上。

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

我试图避免创建重复的用户控件以适应他们想要的布局，然后隐藏/显示控件，具体取决于客户端。

<table>

JSfiddle Demo

编辑：jQuery不允许。 JavaScript OK。

Answer 1

您可以使用jQuery对其进行归档。

以下是将按钮向后移动一步的示例

＆＃13;

$(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
});

＆＃13;

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

＆＃13;

Answer 2

Jquery可以为您做到这一点。代码可能看起来像这样：

＆＃13;

$("#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();
  }
}

＆＃13;

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

＆＃13;

Answer 3

您无需复制布局。您可以通过使用jquery或javascript根据客户端添加/删除css类来实现。

$(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代码如下：

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

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

3 个答案: