clone hàng bảng

Question

Làm thế nào tôi có thể sử dụng javascript (tôi giả định) để sao chép một hàng bảng như ive đẹp minh họa trong hình dưới đây?

clone row http://i28.tinypic.com/2yyuz61.png

Answer 1

Bạn có thể hookup một sự kiện trực tiếp đến tất cả các nút. Nếu bạn cung cấp cho họ một lớp của bản sao ví dụ sau đây sẽ làm việc.

$('input.clone').live('click', function(){ 
    //put jquery this context into a var 
    var $btn = $(this); 
    //use .closest() to navigate from the buttno to the closest row and clone it 
    var $clonedRow = $btn.closest('tr').clone(); 
    //append the cloned row to end of the table 

    //clean ids if you need to 
    $clonedRow.find('*').andSelf().filter('[id]').each(function(){ 
     //clear id or change to something else 
     this.id += '_clone'; 
    }); 

    //finally append new row to end of table 
    $btn.closest('tbody').append($clonedRow); 
}); 

Xin lưu ý: Nếu bạn có các yếu tố trong các dòng của bảng với id bạn sẽ cần phải làm một .each qua chúng và đặt chúng vào một giá trị mới nếu không bạn sẽ kết thúc với id trùng lặp trong dom mà không phải là hợp lệ và có thể chơi havoc với selectors jQuery

bạn có thể làm điều này như vậy

Answer 2

Nếu bạn muốn có một giải pháp thực sự đơn giản, chỉ cần sử dụng innerHTML:

var html = document.getElementById("the row").innerHTML; 

var row = document.createElement('p'); 

row.innerHTML= html; 

document.getElementById("table id").appendChild(row); 

Answer 3

Vì mục đích nào bạn muốn sử dụng dữ liệu? Tôi đã thực hiện những điều tương tự trước đây trên các hình thức đầu vào dữ liệu và nói chung tôi đã tìm thấy nó có lợi cho người dùng không thao tác tất cả mọi thứ trong Javascript nhưng để móc để lưu trữ dữ liệu trên máy chủ và giao diện với AJAX.

Vấn đề là ngay sau khi bạn bắt đầu cho phép người dùng thực hiện thao tác bảng phức tạp này và họ vô tình nhấn nút quay lại, bạn kết thúc với rất nhiều người đánh cược bất mãn. Mã hóa lưu trữ tạm thời trên cơ sở dữ liệu không khó hơn nhiều so với thao tác Javascript và trên thực tế có thể dễ dàng hơn khi bạn có thể phá vỡ các thao tác một cách dễ dàng hơn. Gỡ lỗi cũng đơn giản hơn vì lý do đó (bạn luôn kiểm tra quyền truy cập vào trạng thái hiện tại của bảng).

Rất nhiều tùy chọn để xử lý qua AJAX - cách đơn giản nhất để chỉ sử dụng bộ phận giữ chỗ và cấp toàn bộ cấu trúc bảng khi cần.

Answer 4

Một jQuery dụ:

$(document).ready(function(){ 
    $('TABLE.recs').delegate('INPUT.clone','click',function(e){ 
    e.preventDefault(); 
    var s = $(this).parent().parent().clone().wrap('<div>').parent().html(); 
    $('TABLE.recs TBODY TR:last').after(s); 
    }); 
});