Fatal编程技术网
  • javascript/
  • Javascript 将多条记录从JQuery保存到Rails表？

Javascript 将多条记录从JQuery保存到Rails表？

javascript jquery ruby-on-rails-3 datatables

Javascript 将多条记录从JQuery保存到Rails表？,javascript,jquery,ruby-on-rails-3,datatables,Javascript,Jquery,Ruby On Rails 3,Datatables,我在jquery中有一个表，它是在我单击另一个jquery表的记录时生成的。此表记录包含要输入和提交的数据。该表由几条记录组成。单击submit按钮时，表中的每个记录都必须是rails数据库表中的单独记录。如何获取所需数据并将其提交到数据库。我知道我需要表的create方法，但我不知道如何获得要分配的属性 项目列表表 <div class="right"> <b>Projects this week</b><div class = "right

我在jquery中有一个表，它是在我单击另一个jquery表的记录时生成的。此表记录包含要输入和提交的数据。该表由几条记录组成。单击submit按钮时，表中的每个记录都必须是rails数据库表中的单独记录。如何获取所需数据并将其提交到数据库。我知道我需要表的create方法，但我不知道如何获得要分配的属性

项目列表表

<div class="right">

    <b>Projects this week</b><div class = "right"><input name="btnDel" type="button" id="btnDel" value="-" onClick="RemoveRow();"></div>

    <ul id="task_list">
        <form name="frmMain" method="post">
        <table width="470" border="1" id="tbExp">
          <tr>
            <td><div align="center">No.</div></td>
            <td><div align="center">Project </div></td>
            <td><div align="center">Task </div></td>
            <td><div align="center">Hours </div></td>
            <td><div align="center"></div></td> 
          </tr>
        </table>

        <input type="hidden" name="hdnMaxLine" value="0">
        </form>
    </ul>
</div>

function CreateSelectOption(ele) {
    var objSelect = document.getElementById(ele);
    var Item = new Option("", "");
    objSelect.options[objSelect.length] = Item;
    var Item = new Option("Pre-Sales");
    objSelect.options[objSelect.length] = Item;
    var Item = new Option("Project");
    objSelect.options[objSelect.length] = Item;
    var Item = new Option("Support");
    objSelect.options[objSelect.length] = Item;
}

function CreateNewRow(num, str) {
    var intLine = parseInt(document.frmMain.hdnMaxLine.value);
    intLine++;

    var theTable = document.getElementById("tbExp");
    var newRow = theTable.insertRow(theTable.rows.length)
    newRow.id = newRow.uniqueID

    var newCell

    //*** ID Column ***//
    newCell = newRow.insertCell(0);
    newCell.id = newCell.uniqueID;
    newCell.setAttribute("className", "css-name");
    newCell.innerHTML = num;

    //*** Column 1 ***//
    newCell = newRow.insertCell(1);
    newCell.id = newCell.uniqueID;
    newCell.setAttribute("className", "css-name");
    //newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"10\" NAME=\"Column1_"+intLine+"\"  ID=\"Column1_"+intLine+"\" VALUE=\"\"></center>";
    newCell.innerHTML = str;

    //*** Column 2 ***//
    newCell = newRow.insertCell(2);
    newCell.id = newCell.uniqueID;
    newCell.setAttribute("className", "css-name");
    newCell.innerHTML = "<center><SELECT NAME=\"Column5_"+intLine+"\" ID=\"Column5_"+intLine+"\"></SELECT></center>";

    //*** Column 3 ***//
    newCell = newRow.insertCell(3);
    newCell.id = newCell.uniqueID;
    newCell.setAttribute("className", "css-name");
    newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column4_" + intLine + "\"  ID=\"Column4_" + intLine + "\" VALUE=\"\"></center>";

    //*** Column 4 ***//
    //  newCell = newRow.insertCell(3);
    //  newCell.id = newCell.uniqueID;
    //  newCell.setAttribute("className", "css-name");
    //  newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column4_"+intLine+"\"  ID=\"Column4_"+intLine+"\" VALUE=\"\"></center>";

    //*** Column 5 ***//
    //newCell = newRow.insertCell(4);
    //newCell.id = newCell.uniqueID;
    //  newCell.setAttribute("className", "css-name");
    //  newCell.innerHTML = "<center><SELECT NAME=\"Column5_"+intLine+"\" ID=\"Column5_"+intLine+"\"></SELECT></center>";

    //*** Create Option ***//
    CreateSelectOption("Column5_" + intLine)
    document.frmMain.hdnMaxLine.value = intLine;
}

function RemoveRow() {
    intLine = parseInt(document.frmMain.hdnMaxLine.value);
    if(parseInt(intLine) > 0) {
        theTable = document.getElementById("tbExp");
        theTableBody = theTable.tBodies[0];
        theTableBody.deleteRow(intLine);
        intLine--;
        document.frmMain.hdnMaxLine.value = intLine;
    }
}


本周的项目

    
不
项目
任务
小时
Javscript项目列表表

<div class="right">

    <b>Projects this week</b><div class = "right"><input name="btnDel" type="button" id="btnDel" value="-" onClick="RemoveRow();"></div>

    <ul id="task_list">
        <form name="frmMain" method="post">
        <table width="470" border="1" id="tbExp">
          <tr>
            <td><div align="center">No.</div></td>
            <td><div align="center">Project </div></td>
            <td><div align="center">Task </div></td>
            <td><div align="center">Hours </div></td>
            <td><div align="center"></div></td> 
          </tr>
        </table>

        <input type="hidden" name="hdnMaxLine" value="0">
        </form>
    </ul>
</div>

function CreateSelectOption(ele) {
    var objSelect = document.getElementById(ele);
    var Item = new Option("", "");
    objSelect.options[objSelect.length] = Item;
    var Item = new Option("Pre-Sales");
    objSelect.options[objSelect.length] = Item;
    var Item = new Option("Project");
    objSelect.options[objSelect.length] = Item;
    var Item = new Option("Support");
    objSelect.options[objSelect.length] = Item;
}

function CreateNewRow(num, str) {
    var intLine = parseInt(document.frmMain.hdnMaxLine.value);
    intLine++;

    var theTable = document.getElementById("tbExp");
    var newRow = theTable.insertRow(theTable.rows.length)
    newRow.id = newRow.uniqueID

    var newCell

    //*** ID Column ***//
    newCell = newRow.insertCell(0);
    newCell.id = newCell.uniqueID;
    newCell.setAttribute("className", "css-name");
    newCell.innerHTML = num;

    //*** Column 1 ***//
    newCell = newRow.insertCell(1);
    newCell.id = newCell.uniqueID;
    newCell.setAttribute("className", "css-name");
    //newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"10\" NAME=\"Column1_"+intLine+"\"  ID=\"Column1_"+intLine+"\" VALUE=\"\"></center>";
    newCell.innerHTML = str;

    //*** Column 2 ***//
    newCell = newRow.insertCell(2);
    newCell.id = newCell.uniqueID;
    newCell.setAttribute("className", "css-name");
    newCell.innerHTML = "<center><SELECT NAME=\"Column5_"+intLine+"\" ID=\"Column5_"+intLine+"\"></SELECT></center>";

    //*** Column 3 ***//
    newCell = newRow.insertCell(3);
    newCell.id = newCell.uniqueID;
    newCell.setAttribute("className", "css-name");
    newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column4_" + intLine + "\"  ID=\"Column4_" + intLine + "\" VALUE=\"\"></center>";

    //*** Column 4 ***//
    //  newCell = newRow.insertCell(3);
    //  newCell.id = newCell.uniqueID;
    //  newCell.setAttribute("className", "css-name");
    //  newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column4_"+intLine+"\"  ID=\"Column4_"+intLine+"\" VALUE=\"\"></center>";

    //*** Column 5 ***//
    //newCell = newRow.insertCell(4);
    //newCell.id = newCell.uniqueID;
    //  newCell.setAttribute("className", "css-name");
    //  newCell.innerHTML = "<center><SELECT NAME=\"Column5_"+intLine+"\" ID=\"Column5_"+intLine+"\"></SELECT></center>";

    //*** Create Option ***//
    CreateSelectOption("Column5_" + intLine)
    document.frmMain.hdnMaxLine.value = intLine;
}

function RemoveRow() {
    intLine = parseInt(document.frmMain.hdnMaxLine.value);
    if(parseInt(intLine) > 0) {
        theTable = document.getElementById("tbExp");
        theTableBody = theTable.tBodies[0];
        theTableBody.deleteRow(intLine);
        intLine--;
        document.frmMain.hdnMaxLine.value = intLine;
    }
}

函数CreateSelectOption（ele）{
var objSelect=document.getElementById（ele）；
变量项=新选项（“，”）；
objSelect.options[objSelect.length]=项目；
var项目=新期权（“售前”）；
objSelect.options[objSelect.length]=项目；
var项目=新期权（“项目”）；
objSelect.options[objSelect.length]=项目；
var项目=新期权（“支持”）；
objSelect.options[objSelect.length]=项目；
}
函数CreateNewRow（num，str）{
var intLine=parseInt（document.frmMain.hdnMaxLine.value）；
intLine++；
var theTable=document.getElementById（“tbExp”）；
var newRow=theTable.insertRow（theTable.rows.length）
newRow.id=newRow.uniqueID
var newCell
//***ID列***//
newCell=newRow.insertCell（0）；
newCell.id=newCell.uniqueID；
setAttribute（“className”、“css name”）；
newCell.innerHTML=num；
//***第1栏***//
newCell=newRow.insertCell（1）；
newCell.id=newCell.uniqueID；
setAttribute（“className”、“css name”）；
//newCell.innerHTML=“”；
newCell.innerHTML=str；
//***第2栏***//
newCell=newRow.insertCell（2）；
newCell.id=newCell.uniqueID；
setAttribute（“className”、“css name”）；
newCell.innerHTML=“”；
//***第3栏***//
newCell=newRow.insertCell（3）；
newCell.id=newCell.uniqueID；
setAttribute（“className”、“css name”）；
newCell.innerHTML=“”；
//***第4栏***//
//newCell=newRow.insertCell（3）；
//newCell.id=newCell.uniqueID；
//setAttribute（“className”、“css name”）；
//newCell.innerHTML=“”；
//***第5栏***//
//newCell=newRow.insertCell（4）；
//newCell.id=newCell.uniqueID；
//setAttribute（“className”、“css name”）；
//newCell.innerHTML=“”；
//***创建选项***//
CreateSelectOption（“第5列”+intLine）
document.frmMain.hdnMaxLine.value=intLine；
}
函数{
intLine=parseInt（document.frmMain.hdnMaxLine.value）；
如果（parseInt（intLine）>0）{
theTable=document.getElementById（“tbExp”）；
table body=table.tBodies[0]；
tablebody.deleteRow（intLine）；
内线--；
document.frmMain.hdnMaxLine.value=intLine；
}
}
createworks迁移

需要将数据保存到的位置的配置文件

class CreateEfforts < ActiveRecord::Migration
  def self.up
    create_table :efforts do |t|
      t.integer :project_task_id
      t.integer :user_id
      t.date :week_commencing
      t.float :hours

      t.timestamps
    end
  end

  def self.down
    drop_table :efforts
  end
end

classcreateefforcess
考虑从视图中提取数据。您需要一些数据，如：

var myRecord = { number: 123, Project: 'name'... };
var tableList = [];
最终，您的create table将向tableList添加一条记录，您可以将该记录传递给jQuery函数，该函数通过$.post（）发送到Rails端点。然后可以使用tableList在页面上呈现表格