CircuitOnline/public/testbench.html

<button onclick="addInpButton()">Add Input </button>
<button onclick="addOutputButton()">Add Output </button>
<button onclick="addCaseButton()">Add Case </button>
<button onclick="generateDataAndCopyButton()">GenerateData And Copy to Clipboard</button>
<button onclick="loadDataButton()">Load Data</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/table-to-json@1.0.0/lib/jquery.tabletojson.min.js"></script>
<table style="width:100%" contenteditable="true" id="testBenchTable">
    <tr>
        <th colspan="3">INPUTS</th>
        <th colspan="3">OUTPUTS</th>
    </tr>
    <tr>
        <th>inp1</th>
        <th>inp2</th>
        <th>inp3</th>
        <th>out1</th>
        <th>out2</th>
        <th>out3</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
</table>

<div id="testDataDiv" style="font-size:16px;width:600px,height:300px" >
    <textarea id="testData" cols="100" >
        </textarea>
    <p>Data Copied successfully</p>
</div>




<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th, td {
        padding: 15px;
    }
    th {
        text-align: left;
    }
    table {
        border-spacing: 5px;
    }

    .inp{
        bgcolor:"red";
    }
</style>

<script>

//    var data={
//        "n":3,
//        "inputs":[
//            {
//                "label":"inp1",
//                "bitWidth":2,
//                "values": ["10","10","10"]
//            },
//            {
//                "label":"inp2",
//                "bitWidth":2,
//                "values": ["11","10","01"],
//            },
//            {
//                "label":"inp3",
//                "bitWidth":2,
//                "values": ["01","10","01"],
//            },
//        ],
//        "outputs":[
//            {
//                "label":"out1",
//                "bitWidth":1,
//                "values": ["1","1","0"]
//            },
//            {
//                "label":"out2",
//                "bitWidth":1,
//                "values": ["1","0","1"],
//            },
//        ]
//    }

var data={n:0,inputs:[],outputs:[]}
    function title(data=data){
        var s='<tr>';
        s+='<th >Label</th>'
        for(var i=0;i<data.inputs.length;i++)
            s+='<th bgcolor="#aaF">' + data.inputs[i].label +'</th>'
        for(var i=0;i<data.outputs.length;i++)
            s+='<th bgcolor="#aFa">' + data.outputs[i].label +'</th>'
        s+="</tr>";

//        s+='<th>INPUT</th>'.repeat(data.inputs.length)
//        s+='<th colspan="'+data.outputs.length+'">OUTPUTS</th>'
        return s
    }
    function labels(data=data){

        var s='<tr>';
        s+='<td >BitWidth</td>'
        for(var i=0;i<data.inputs.length;i++)
            s+='<td bgcolor="#aaF" type="inp">' + data.inputs[i].bitWidth +'</td>'
        for(var i=0;i<data.outputs.length;i++)
            s+='<td bgcolor="#aFa">' + data.outputs[i].bitWidth +'</td>'
        s+="</tr>";
        return s
    }

    function testCases(data=data){
        var s='';
        for(var i=0;i<data.n;i++){
            s+='<tr>';
            s+='<td >'+(i+1)+'</td>'
            for(var j=0;j<data.inputs.length;j++)
                s+='<td >' + data.inputs[j].values[i] +'</td>'
            for(var j=0;j<data.outputs.length;j++)
                s+='<td >' + data.outputs[j].values[i] +'</td>'
            s+="</tr>";
        }

        return s;
    }


    function loadData(data=data){

        $("#testBenchTable").empty();
        $("#testBenchTable").append(title(data));
        $("#testBenchTable").append(labels(data));
        $("#testBenchTable").append(testCases(data));
        no_inps=data.inputs.length;
        no_outs=data.outputs.length;
    }

    function generateTestData(){
        var data = $('table').tableToJSON({allowHTML:true,ignoreColumns:[0]});
        var type={};
        i=0;
        var attrs=[]
        for (attr in data[0]){
            attrs.push(attr);
        }
        for(var j=0;j<no_inps;j++){
            type[attrs[i]]="inputs";
            i++;
        }
        for(var j=0;j<no_outs;j++){
            type[attrs[i]]="outputs";
            i++;
        }
        var testData={n:data.length-1,inputs:[],outputs:[]}
        var d={}
        for(attr in data[0]){
            d[attr]= {bitWidth:data[0][attr],label:attr,values:[]}
        }
        for(var i=1;i<data.length;i++){
            for (attr in data[i]){
                d[attr].values.push(data[i][attr])
            }
        }
        for(var i=0;i<attrs.length;i++){
            var attr=attrs[i];
            testData[type[attr]].push(d[attr]);
        }
        return testData;
    }

    function addInp(data){
        data.inputs.push( { label:"inp"+(data.inputs.length+1),bitWidth:1,values:Array.from(Array(data.n), () => "0") })
        return data;
    }
    function addOutput(data){
        data.outputs.push( { label:"out"+(data.outputs.length+1),bitWidth:1,values:Array.from(Array(data.n), () => "0") })
        return data;
    }
    function addCase(data){
        for(var i=0;i<data.inputs.length;i++){
            data.inputs[i].values.push("0");
        }
        for(var i=0;i<data.outputs.length;i++){
            data.outputs[i].values.push("0");
        }
        data.n++;
        return data;
    }

    loadData(data);


    function addInpButton(){
        loadData(addInp(generateTestData()));
    }
    function addOutputButton(){
        loadData(addOutput(generateTestData()));
    }
    function addCaseButton(){
        loadData(addCase(generateTestData()));
    }

    function generateDataAndCopyButton(){

        $("#testDataDiv").show();
        $("#testData").val(JSON.stringify(generateTestData()));
        setTimeout(function(){$("#testData").select();document.execCommand("copy")},100) ;
    }

    function loadDataButton() {
        loadData(JSON.parse(prompt("Enter JSON TestBenchData")));
    }

    $("#testDataDiv").hide();
</script>