獲取HTML表格行的編輯使用JavaScript/jQuery的

我使用這個代碼通過jQuery的創建HTML表：獲取HTML表格行的編輯使用JavaScript/jQuery的

<script src="jquery-1.9.1.js"></script> 
    <script> 
     function createTable() { 
      mytable = $('<table></table>').attr({ id: "basicTable" }); 
       var row = $('<tr></tr>').appendTo(mytable); 
       $('<td></td>').text($('#drpEnter').val()).appendTo(row); 
       $('<td></td>').text($('#txtAge').val()).appendTo(row); 
      mytable.appendTo("#box"); 
      $('#drpEnter').val(0); 
      return false; 
     }; 
    </script>

這裏的「drpEnter」是一個下拉，「txtAge」是一個文本框和「盒子」是在asp.net一個div，你可以在這裏看到：

<div id="divTabl"> 
     Name: 
     <asp:DropDownList ID="drpEnter" runat="server"> 
      <asp:ListItem Text="Hello" Value="Hello"></asp:ListItem> 
      <asp:ListItem Text="Where" Value="Where"></asp:ListItem> 
     </asp:DropDownList> 
     <br /> 
     Age: 
     <asp:TextBox runat="server" ID="txtAge"></asp:TextBox> 
    </div> 
    <asp:Button ID="btnclick" runat="server" OnClientClick="return createTable();" Text="Create Table" /> 
    <div id="box"> 
    </div>

我曾呼籲按鈕的點擊腳本功能，我的表是工作的罰款，並與每一個新的點擊得到更新。

現在我希望我的表應該有一個「編輯」和「刪除」按鈕，單擊編輯按鈕時，應顯示在「txtAge」文本框中，用戶可以在其中編輯它，然後在按鈕上單擊表格應該獲得更新，刪除按鈕應該刪除特定的行。任何人都可以幫助我實現這個功能！

來源

2014-04-23 Anubhav Chaudhary

你有沒有試圖自己做這件事？如果是這樣，你有什麼具體問題？ –

是的，我試圖做到這一點，但我不知道如何獲得文本框中特定行的值 –

我已經通過我自己解決我的問題，謝謝大家不回答，因爲如果有人對你會提供的答案，那麼我會不會被自己:)試過這麼多

這是解決方案：

<script> 
     $(document).ready(function() { 
      $(document).on('click', '#btnedt', function() { 
       debugger; 
       $('#drpEnter').val($(this).closest('tr').find('td:eq(0)').text()); 
       $('#txtAge').val($(this).closest('tr').find('td:eq(1)').text()); 
      }); 
     }); 
    </script>

這裏#btnedt是通過使用jquery創建的動態按鈕，該按鈕將與每個新行來生成的，所以更新的代碼，用於產生表如下：

<script> 
     function createTable() { 
      mytable = $('<table></table>').attr({ id: "basicTable" }); 
      if ($('#txtEnter').val() != "") { 
       var row = $('<tr></tr>').appendTo(mytable); 
       $('<td></td>').text($('#drpEnter').val()).appendTo(row); 
       $('<td></td>').text($('#txtAge').val()).appendTo(row); 
       $('<td><input type="button" id="btnedt" value="Edit" /></td>').appendTo(row); 
      } 
      mytable.appendTo("#box"); 
      $('#drpEnter').val(""); 
      $('#txtAge').val(""); 
      return false; 
     }; 
    </script>

我希望它能解決別人的問題。

來源

2014-04-25 05:34:56

獲取HTML表格行的編輯使用JavaScript/jQuery的

回答

相關問題