PHP/jQuery的創建和操縱表

我正在尋找一種方式來增加額外的行基於從下拉列表或滑塊選擇的值表..PHP/jQuery的創建和操縱表

以此爲一個非常基本的表：

<html> 
<head> 
    <title></title> 
</head> 
<body> 
<table border="1"> 
    <thead><tr> 
    <th>Name</th> 
    <th>A</th> 
    <th>B</th> 
    <th>C</th> 
    <th>D</th> 
    <th>E</th> 
    <th>F</th> 
    </tr> 
    </thead><tbody> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td><input type="checkbox"></td> 
    </tr> 
    </tbody> 
</table> 
<br> 
</body> 
</html>

我想添加一個下拉列表或滑塊，它允許用戶增加或減少可見行數並可以完成。然後當提交表單時，所有的值都將被正常提交。任何想法我可以做到這一點？

我也想使用一個複選框在最後一欄，允許用戶從第一行復制除名稱的所有值的任何行，他們檢查..這可能嗎？特別是如果他們更新第一行，其他人會更新？

感謝感激地收到任何意見，指針或鏈接:)

來源

2013-07-11 JeffVader

叉形例子所以這是兩個問題。你嘗試過什麼嗎？這裏是一個小提琴開始http://jsfiddle.net/mplungjan/fRdE6/ – mplungjan

用戶是否想要從第一行復制，然後修改該新行中的某些內容，並將修改第一行，然後替換行中的新值剛剛更新？ – mplungjan

我的回答對你有幫助嗎？ – mplungjan

在這裏你去。自定義編碼只爲你

Live Demo

$(function(){ 
    var $tbody = $("#tb1"),$firstRow=$("#tb1 tr").eq(0); 
    $('#defaultSlider').change(function(){ 
     var val = this.value; 
     $('#currentValue').html(val); 
     $tbody.find("tr:gt("+val+")").remove(); 
     for (var i = $("#tb1 tr").length;i<val;i++) { 
      $tbody.append('<tr><td></td><td></td><td></td><td></td><td></td><td></td><td><input type="checkbox" class="copy"/></td></tr>'); 
     } 
    }).change(); // Trigger the event on load, so the table is populated: 

    $firstRow.find("input[type=text]").each(function(i) { 
     $(this).on("blur",function() { // or keyup if useful 
      var val = $(this).val(); 
      var idx = i; 
      var $checked = $("#tb1 tr").find("input[type=checkbox]:checked"); 
      $checked.each(function(i) { 
      if (i>0) { 
       // we may want to keep existing input 
       // perhaps even uncheck row if inout changed, but for now overwrite 
       $(this).closest("tr").find("input").eq(idx).val(val); 
      } 
      }); 
     }); 
    }); 
    $tbody.on("change","tr .copy",function() { 
     if (this.checked) { 
      var $newRow = $firstRow.clone(true); 
      $newRow.find("td:first input").val("") 
      $(this).closest("tr").replaceWith($newRow); 
     } 
    }); 
});

來源

2013-07-11 08:30:34 mplungjan

很好的使用kdb標籤... –

謝謝@RichBradshaw - 呃這個解決方案呢？ – mplungjan

哦，是的:)這太酷了！我會在第一個'}）;'之後使用'.trigger（'change'）;'在綁定更改事件後立即觸發更改，並且不會將'{'和'}'如果'，但在其他方面看起來不錯:) –

，而不是做這個手工我建議使用基因敲除或類似的東西。這樣做的好處是沒有額外的ID，類和這個問題分開的問題，現在沒有討厭的標記在JavaScript中。此外，現在該模型會使用文本框中的值更新，因此您只需調用模型中的值即可獲取任何內容。

這裏是上述的與淘汰賽

http://jsfiddle.net/scottreeddev/pZhh7/

var my = {}; 
var lastValue = 1; 

my.Row = function() 
{ 
    var self = this; 
    self.Name = ko.observable(""); 
    self.RowA = ko.observable(""); 
    self.RowB = ko.observable(""); 
    self.RowC = ko.observable(""); 
    self.RowD = ko.observable(""); 
    self.RowE = ko.observable(""); 
    self.RowF = ko.observable(false); 
}; 

my.viewmodel = 
    { 
     RowCollection: ko.observableArray([new my.Row()]), 
     SliderValue: ko.observable(1) 
    }; 

my.viewmodel.SliderValue.subscribe(function() { 
    var sliderValue = parseInt(my.viewmodel.SliderValue()); 
    if(sliderValue > lastValue) 
    { 
     my.viewmodel.RowCollection.push(new my.Row()); 
    } 
    else 
    { 
     my.viewmodel.RowCollection.pop(); 
    } 
    lastValue = sliderValue; 
}, my.viewmodel); 

ko.applyBindings(my.viewmodel);

來源

2013-07-11 21:59:53

更大的區別是，我不知道我剛纔讀的是什麼......它如何複製第一行？ – mplungjan

PHP/jQuery的創建和操縱表

回答

相關問題