Question

我必须从csv文件中读取数据，并在索引页中以表格形式显示它们。表中的每一行都将具有编辑，删除按钮，当用户单击编辑时，该特定行应变为可编辑状态，并且编辑和删除按钮将通过保存按钮进行放置。用户可以编辑，删除那些行，也可以添加新的空行，输入一些数据。每个新添加的行都将具有“保存”按钮。当用户单击保存时，它将再次保存在csv文件中。

index.html

<style>
.hide{
    display:none;
}
</style>

<div class="row" align="center">
<h1>Products Description</h1>
 </div>
 <br /><%sn="0"%>
 <div class="container">
<table class="table table-striped">
<thead>
    <tr>
          <th>#</th>
        <th>Product Name</th>
        <th>Description</th>
        <th>Brand Name</th>
        <th>Action</th>
    </tr>
</thead>
    <tbody>
        <%@csv_table.each do |row|%>
            <tr class="mtr">
                    <% row.each do |key, value| %>
                            <td class="value"><%= value %></td>
                    <% end %>
                    <div>
                        <td>
                            <%=link_to "Edit", "#", class: "edit"%>|
                          <%=link_to "Delete", "#", class: "delete"%>
                    </td>
                </div>
            </tr>
            <tr class="dtr hide">
                <% row.each do |key, value| %>
                        <%if key.eql?"Id"%>
                            <td><%=value%></td>
                        <%else%>
                            <td><%= text_field_tag :login_aei2, value, class: 'form-control'%></td>
                        <%end%>
                    <% end %>
                <td>
                <%=link_to "Save", "#", remote: true,  class: "save"%>
              </td>
            </tr>
            <% sn = (row.first.second.to_i + 1).to_s%>
            <%content_tag :div,'', id:'id_counter', data:{source: sn}%>
        <%end%>
    </tbody>
</table><%=link_to "Add row", "#", class:"new_row"%>

javaScript

    <script>
        $(document).ready(function(){

    function saveData(){
        alert("-----------");
    }

    function get_cell_data(e){
        e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
        target = target.parentNode;
    }
    return target;
    }

    $(".edit").click(function(){
        var $tr = $(this).closest("tr");
        $tr.addClass("hide");
        $(this).closest('tr').next('tr').removeClass("hide");
        event.preventDefault();
    });

    $(".delete").click(function(e){
        var target = get_cell_data(e);
        var cells = target.getElementsByTagName("td");
        $.ajax({
    url: 'products/delete_row',
    type: "get",
    dataType: 'json',
    data: {"id": cells[0].innerHTML}
  });
  window.location.reload();
    });

    $(".new_row").click(function(){
        $('table tbody').append('<tr class="dtr"><td><%=sn%></td><td><%= text_field_tag :login_aei2,'', class: 'form-control'%></td><td><%= text_field_tag :login_aei2,'', class: 'form-control'%></td><td><%= text_field_tag :login_aei2,'', class: 'form-control'%></td><td><%=link_to "Save", "#", remote: true, id: "save", onclick:"saveData()"%></td></tr>');
        event.preventDefault();
    });

    $(".save").click(function(e){
        var target = get_cell_data(e)
    var cells = target.getElementsByTagName("td");

        $.ajax({
    url: 'products/save_data',
    type: "get",
    dataType: 'json',
    data: {"id": cells[0].innerHTML, "Product Name": cells[1].children[0].value, "Description":cells[2].children[0].value,"Brand Name":cells[3].children[0].value}
  });
  window.location.reload();
    });
});

一切正常，但是当我单击“添加行”按钮时，它将添加新行。但是，当我单击此新行上的保存按钮时，它没有执行任何操作，控制器不会转到为单击保存按钮编写的Java脚本代码。请提前帮助谢谢。

无法通过js将数据保存在新添加的行中

0 个答案: