Saving multiple records from a JQuery to a Rails table?

I have a table in jquery that is produced when i click a record of another jquery table. This record of the table has data to be entered and submitted. The table consists of few records. When the submit button is clicked each record that is in the table has to be a seperate record in a rails database table. How do i grab the data i need and submit it to the database. I know i need the create method of the table but i dont know how to get the attributes to assign.

Project List Table

<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>

Javscript Project List Table

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;
    //  newCe开发者_StackOverflowll.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;
    }
}

CreateEfforts Migration

Config file of where data needs to be saved to

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

Think about abstracting the data out of the view. You need some data like:

var myRecord = { number: 123, Project: 'name'... };
var tableList = [];

Ultimately your create table would add a record to the tableList which you could pass to a jQuery function which sends via a $.post() to a Rails endpoint. Then you can use the tableList to render your table on the page.