javascript – Dynamic Table to configure table and produce interaction data-ThrowExceptions

Exception or error:

I have managed to acquire a very useful dynamic table from a previous stackoverflow post from some time ago and want to purpose it for an interface to set up some rules based upon one or more rules.

enter image description here

So, what I hope to gain from this interaction, is the ability to configure a set of actions (rows) and a set of conditions (columns) and configure the actions by selecting one or more of the checkboxes.

Example, if I want to set asset_type to Equity then I would tick a checkbox for column (instrument = ‘Equity’) and maybe another column (custodian contains ‘CFD’). The ticks mean that the condition is TRUE.

The HTML and jQuery below is great but has no concept of creating a data output from:

  1. Configuration of rows and columns
  2. Selection of checkbox to equal TRUE on one of those options

My ideal for the data created by using the interface would be to have JSON array which includes an ID for each name of the rows and columns and an array of row and column IDs with the associated names.

I believe the array with the row and column IDs and names should be able to be used to control the interface as well by it being an input into the <td> and <tr> HTML layout within the <table>.

Any ideas on how to make the HTML below produce data that informs the interface and the interactions within it? Thanks, Matt

<!DOCTYPE html>
<html lang="en">
<body>

 <table border="1" id="mtable">
    <thead>
      <tr>
         <td>Action</td>
         <td>SecurityType equals Equity</td>
         <td>SecurityType equals Futures</td>
         <td>SecurityType equals CDS</td>
      </tr>
    </thead>

<tbody>
  <tr>
    <td>Set asset_type to Equity</td>
        <td><input type="checkbox"/></td>
        <td><input type="checkbox"/></td>
        <td><input type="checkbox"/></td>
    </tr>
  </tbody>
</table>

<br/><br/>

<input id="row" placeholder="Enter Item Name"/>
   <button id="irow">Insert Row</button><br/><br/>
<input id="col" placeholder="Enter Heading"/>
   <button id="icol">Insert Column</button>

<!-- Script -->
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js'></script>
<script type="text/javascript">
$(document).ready(function(){

$('#irow').click(function(){
    if($('#row').val()){
        $('#mtable tbody').append($("#mtable tbody tr:last").clone());
        $('#mtable tbody tr:last :checkbox').attr('checked',false);
        $('#mtable tbody tr:last td:first').html($('#row').val());
    }else{alert('Enter Text');}
});
$('#icol').click(function(){
    if($('#col').val()){
        $('#mtable tr').append($("<td>"));
        $('#mtable thead tr>td:last').html($('#col').val());
        $('#mtable tbody tr').each(function(){$(this).children('td:last').append($('<input type="checkbox">'))});
    }else{alert('Enter Text');}
      });
      });

    </script>
  </body>
</html>

/// EDIT – ADDED AN EXAMPLE OF DESIRED JSON DATA OUTPUT ///

{"transform_id": "78bn7c8n6876897687g6",
"transform_name": "Trades",
 "rules": [
   {"rule_id": "8796dfh87f9h76796fdh879",
   "rule_name": "Asset Type Translation",
   "rule_date": 20200225135100,
   "rule_config": [
     {
      "rule_order" : 1,
      "action_id": "45554hg664fgh2f456fd5hfg",
      "conditions": [
        {
        "condition_id": "6hg47j7567hgj54gf45hj6g",
        "condition_val": 1
        }
     ]
   },
   {
     "rule_order" : 2,
     "action_id": "5674hg57f45jhg4hjg5hg4h4",
     "conditions": [
       {
       "condition_id": "56gfd45gh3f4564356hg3g4",
       "condition_val": 1
       }
    ]
  },
  {
    "rule_order" : 3,
    "action_id": "786v587x78cv6n7x857687v7",
    "conditions": [
      {
      "condition_id": "56gfd45gh3f4564356hg3g4",
      "condition_val": 1
      },
      {
      "condition_id": "76b85bv7cbc856865cv7cv7",
      "condition_val": 1
      }
    ]
  }]
}],
"actions": [
{
"action_id": "45554hg664fgh2f456fd5hfg",
"action_name": "Set asset_type to Equity",
"action_category": "set",
"action_type": "value",
"output_data": "destination.asset_type"
},
{
"action_id": "5674hg57f45jhg4hjg5hg4h4",
"action_name": "Set asset_type to Future",
"action_category": "set",
"action_type": "value",
"output_data": "destination.asset_type"
},
{
"action_id": "786v587x78cv6n7x857687v7",
"action_name": "Set asset_type to CFD",
"action_category": "set",
"action_type": "value",
"output_data": "destination.asset_type"
}
],

"conditions": [
{
"condition_order" : 1,
"condition_id": "6hg47j7567hgj54gf45hj6g",
"condition_name": "instrument_type equals Equity",
"condition_category": "string",
"condition_type": "equals",
"input_data": "origin.instrument_type"
},
{
"condition_order" : 2,
"condition_id": "56gfd45gh3f4564356hg3g4",
"condition_name": "instrument_type equals Future",
"condition_category": "string",
"condition_type": "equals",
"input_data": "origin.instrument_type"
},
{
"condition_order" : 3,
"condition_id": "76b85bv7cbc856865cv7cv7",
"condition_name": "custodian_name contains CFD",
"condition_category": "string",
"condition_type": "contains",
"input_data": "origin.custodian_name"
}
]
}
How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *