以編程方式將按鈕移動到另一個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>