生成HTML表格客戶端

（ASP.NET Web應用程序）我想創建一個允許用戶構建HTML表格的頁面。用戶將獲得以下控件：用於定義表格中行數量的文本框，用於定義表格中列數量的文本框以及形狀項目列表（例如Square，Octagon等））將在每個單元格中顯示。生成HTML表格客戶端

當用戶在每個控件中輸入一個值時，我想根據現有值構建和顯示錶格。我想處理在客戶端生成HTML表格的代碼。

我有什麼選擇？我遇到了一個我認爲可能有用的number of articles，但我無法將所有內容拼湊在一起並收集適用的方法;我幾乎沒有客戶端腳本的經驗，但是如果它能產生一個乾淨，高效的解決方案，我不會迴避學習曲線（程序員會怎樣？）。

任何您可以提供的信息鏈接將不勝感激。

來源

2009-04-27 cookbr

用戶可以改變列數/行數嗎？如果是這樣，這是多一點涉及（仍然可行） – scunliffe 2009-04-27 20:12:35

是的，用戶可以隨時更改列數，行數和選定的形狀。預計該表將相應地進行調整。 – cookbr 2009-04-27 20:35:17

帶有幾個嵌套循環的JQuery應該很容易做到這一點。您可以使用字符串生成器或其他東西來優化它，但基本知識非常清晰。如果你正在做一些更復雜的事情，你可能會更適合查看JQuery或MS AJAX的模板引擎之一：

<script type="text/javascript"> 
    $(function() { 
     $('INPUT, SELECT').change(function() { 
      var rows = parseInt($('#rows').get(0).value); 
      var cols = parseInt($('#cols').get(0).value); 
      if (isNaN(rows) || isNaN(cols)) { 
       return; 
      } 
      var shape = $('#shape').get(0).value; 
      drawTable(rows, cols, shape); 
     }); 
    }); 

    function drawTable(rows, cols, shape) { 
     $('#results').empty().append("<table></table>"); 
     var table = $('#results > TABLE'); 

     for (var row = 0; row < rows; row++) { 
      var htmlRow; 
      htmlRow = '<tr>'; 
      for (var col = 0; col < cols; col++) { 
       htmlRow += '<td><img src="' + shape + '.gif" alt="' + shape + '" /></td>'; 
      } 
      htmlRow += "</tr>"; 
      table.append(htmlRow); 
     } 
    }   
</script> 

Columns: <input id="cols" type="text" /> <br /> 
Rows: <input id="rows" type="text" /> <br /> 
Shape: 
    <select id="shape"> 
     <option value="square">Square</option> 
     <option value="circle">Circle</option> 
    </select> 

<div id="results"> 
</div>

來源

2009-04-27 20:36:33

我看起來像你想做一些真正具體的事情，所以你將不得不做一個自定義的構建。我會說看看JQuery（http://jquery.com/），這是編寫自定義JavaScript的最佳方式之一，無需花費數小時重新發明輪子。 Google上有很多很好的教程。

編輯：有一種簡單的方法來添加元素（您的案例的錶行）並設置其屬性。如果需要，也可以使用AJAX調用來保存所有內容。

希望幫助

來源

2009-04-27 20:13:39 marcgg

您可以對HTML DOM編程，建表，如果你真的想這樣做在客戶端。創建一個表格對象並添加行和列應該不是什麼大問題。您可以在for循環中使用文本框的值作爲控制變量。有關要使用的DOM對象，請參閱the W3Schools tutorial。添加形狀客戶端應該像在td元素中添加圖像對象（或img標籤）一樣簡單。

我自己並沒有這樣做，但根據您所描述的內容，這聽起來像是在客戶端可以用JavaScript完成的事情，而無需付出巨大的努力。也就是說，我一定會考慮在服務器上做這件事，除非你真的需要在客戶端上。

編輯： 順便說一句，我不太瞭解jQuery。可能有一種更簡單的方法來處理該庫。但純粹的JS方式不應該太多毛。

來源

2009-04-27 20:18:14

生成HTML表格客戶端

回答

相關問題