プログラムで別のボタンに移動

Question

私は、ASP.NETアプリケーションで<table>を使用して設計されたログインフォームを持っています。

クライアントは、いくつかのUIコントロールの周りに移動することによって、レイアウトを変更するために求めています。彼らはログインボタンの下にある「パスワードを忘れました」リンクを別々の行に移動する必要があります。

しかし、他のすべてのクライアントのために、すべてが同じままにする必要がありますので、任意の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

EDIT：jQueryを許可されていません。 JavaScriptはOKです。

Answer 1

jQueryを使用してアーカイブすることができます。ここで

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

をボタン一歩を移動させる例です。あなたはレイアウトを複製する必要はありません

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

：コードは次のようになります。 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>