2014-06-16 71 views
0

我需要另一個name2列,其中有一個按鈕(全部複製),一旦你點擊一個對話框就會出現「你確定要複製|是/否」。它會將名稱中的數據克隆到name2。克隆第1列到第2列使用按鈕

<table class="downpanel"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Name</th> 
      <th></th> 
      <th>Name2</th> 
      <th></th> 
      <th colspan="">Count</th> 
      <th></th> 
      <th>Unit</th> 
      <th></th> 
      <th>Category</th> 
      <th></th> 
      <th>Data1</th> 
      <th></th> 
      <th>Data2</th> 
      <th></th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <input type="button" class="copyall"> 
      </td> 
      <td> 
       <input type="text" size="25" name="name"> 
      </td> 
      <td> 
       <input type="text" size="25" name="name2"> 
      </td> 
      <td> 
       <input type="button" class="copy"> 
      </td> 
      <td> 
       <input type="text" size="3" name="from"> 
      </td> 
      <td> 
       <input type="text" size="3" name="to"> 
      </td> 
      <td> 
       <input type="button" class="copy"> 
      </td> 
      <td> 
       <select name="unit" style="width: 75px;"> 
        <option value="blah">blah</option> 
       </select> 
       <br /> 
      </td> 
      <td> 
       <input type="button" class="copy"> 
      </td> 
      <td> 
       <select name="category" style="width: 275px;"> 
        <option value="blah">blah</option> 
       </select> 
       <br /> 
      </td> 
      <td> 
       <input type="button" class="copy"> 
      </td> 
      <td> 
       <input type="text" size="10" id="datepicker" name="data1"> 
      </td> 
      <td> 
       <input type="button" class="copy"> 
      </td> 
      <td> 
       <input type="text" size="7" name="data2"> 
      </td> 
      <td> 
       <input type="button" class="copy"> 
      </td> 
     </tr> 
    </tbody> 
</table> 

http://jsfiddle.net/jakecigar/hq2GG/2/

+0

你的意思是所有的領域一一 – Ranjith

+0

添加新行不,我的意思是在「NAME2」列有是一個按鈕,一旦你點擊它。它會克隆/複製「name」列中的所有數據。我已經做到了,但它每行復制。現在我需要一個按鈕,每列將複製以前的數據列在前:如果今天的日期是6月16日(col1)在6月17日(col2)有一個按鈕來複制col1中的數據。如果你有另一個6月18日(col3),它會像這樣複製col2中的數據。我希望你能得到我的觀點 – Hans

回答

0

檢查這個http://jsfiddle.net/hq2GG/4/

var r = confirm("Are you sure you want to copy?"); 
在這兩個副本

,並複製

http://jsfiddle.net/hq2GG/6/

+0

謝謝你。這是完美的。最後,如果我把每列的按鈕功能與每行按鈕相同的功能複製預覽數據是可能的 – Hans

+0

是的,你可以在你的.on('click','.copy',function()方法中添加這個代碼,就像在copyall方法 – rjdmello

+0

你能告訴我如何先生嗎?在http://jsfiddle.net/hq2GG/4/ – Hans

0

您所面臨的模式混搭的問題。您使用HTML啓動了您的數據,現在您想通過Javascript處理它。問題越複雜,編碼混亂的結果就越多。這不是關於混合不同的編碼實踐,而是通過在HTML中設計一個部分並在Javascript中設計另一個部分來打破概念性返工。因此,如果JavaScript似乎是強制性的,那麼首先要設計一切,就像整個應用程序只包含Javascript一樣。定義一個模式:

  1. DOM節點操縱(使用的innerHTML)

一旦你得到了一個模式(將最先進的技術,也更容易操縱)OR

  • HTML編寫風格讓你的矩陣成爲一個矩陣。如果您需要複製單元格,行和列,則需要能夠解決這些問題。在DOM模型中,您可以維護一個二維包裝數組,在html編譯風格中,您顯然很少會使用ID,比如cell1_3,這可以幫助您使用getElementById。在這個時候,您可以處理元素,只需要制定循環,即可在散裝模式下複製,移動或刪除內容。

    一旦你完成了所有的概念性預處理,你可以決定預先填寫你的html頁面(而不是javascript) - 但是這必須遵循你爲腳本模式設置的規則。

  • +0

    謝謝你的建議。 – Hans

    相關問題