Question

125

JavaScript reading data into an array from a dynamic table of textfields

rated 0 times [ 127] [ 2] / answers: 1 / hits: 15630 / 10 Years ago, mon, march 17, 2014, 12:00:00

I'm dynamically creating a table using an HTML table and JavaScript Functions attatched to button clicks. I now want to take the data and store it into multidimensional array (if possible) using another button named finished. I'm having trouble even getting started with the last method to save it into array. I can't figure out how to retrieve the text data.

Here is my current HTML code.

<head>

    <title>TableTest</title>

    <script src=/javascript/func.js></script>

</head>

<body>

      <form>

         <div id=Input>

                        <INPUT class=form-button id=AddRow type=button value=Add Row onclick=addRow('dataTable') />

                        <INPUT class=form-button id=DeleteRow type=button value=Delete Row(s) onclick=deleteRow('dataTable') />

                        <INPUT class=form-button id=Finished type=button value=Finished onclick=gatherData('dataTable') />

                    <table id=dataTable border=1 style=width:200px id=mytable align=center cellspacing=3 cellpadding=4>       

                        <th>Select</th>

                        <th>Text1</th>

                        <th>Text2</th> 

                        <th>Text3</th>

                            <tr>

                            <td><INPUT type=checkbox name=chk/></td>

                            <td><INPUT type=text name=text1/></td>

                            <td><INPUT type=text name=txt2/></td>

                            <td><INPUT type=text name=txt3/></td>

                            </tr>

                    </table>    

            </div>

       </form>

</body>

Here is my JavaScript file:

 function addRow(tableID) {



        var table = document.getElementById(tableID);



        var rowCount = table.rows.length;

        var row = table.insertRow(rowCount);



        var colCount = table.rows[0].cells.length;



        for(var i=0; i<colCount; i++) {



            var newcell = row.insertCell(i);



            newcell.innerHTML = table.rows[1].cells[i].innerHTML;

            //alert(newcell.childNodes);

            switch(newcell.childNodes[0].type) {

                case text:

                        newcell.childNodes[0].value = ;

                        break;

                case checkbox:

                        newcell.childNodes[0].checked = false;

                        break;

            }

        }

    }



    function deleteRow(tableID) {

        try {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;



        for(var i=0; i<rowCount; i++) {

            var row = table.rows[i];

            var chkbox = row.cells[0].childNodes[0];

            if(null != chkbox && true == chkbox.checked) {

                if(rowCount <= 2) {

                    alert(Cannot delete all the rows.);

                    break;

                }

                table.deleteRow(i);

                rowCount--;

                i--;

            }

        }

        }catch(e) {

            alert(e);

        }

    }



function gatherData(){ 





 //Tests

        var table = document.getElementById('dataTable');

        var rowCount = table.rows.length;

        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;



        alert(rowCount);

        alert(row);

        alert(colCount); 

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

leog

Add To Favorites

Follow

Total Points: 225

Total Questions: 113

Total Answers: 118

Location: Oman

Member since Wed, Apr 12, 2023

1 Year ago

leog questions

1 Why using toRef(props) and is it good idea to change their value in CompositionAPI?

Fri, Oct 1, 21, 00:00, 3 Years ago

1 Material-UI pickers trigger validation on blur not on change?

Sun, Sep 13, 20, 00:00, 4 Years ago

1 What's the difference between onClick ={ () => function()} and onClick = {function()}?

Thu, Jul 16, 20, 00:00, 4 Years ago

1 Detect an Electron instance via JavaScript

Mon, May 11, 20, 00:00, 4 Years ago

1 changing theme with react native elements not working?

Sat, Apr 18, 20, 00:00, 4 Years ago

View All

answered 10 Years ago francokeganr · Accepted Answer

I tried to keep it simple, and also jQuery clean, so to speak.

    var data = [];

    function gatherData() {

         var table = document.getElementById('dataTable');

         for (r = 1; r < table.rows.length; r++) {



             var row = table.rows[r];

             var cells = row.cells;



             for (c = 0; c < cells.length; c++) {

                 var cell = cells[c];

                 var inputElem = cell.children[0];

                 var isInput = inputElem instanceof HTMLInputElement;

                 if (!isInput)

                     return;



                 var value = inputElem.value;



                 var isCheckbox = inputElem.getAttribute('type') == 'checkbox';

                 if (isCheckbox)

                     value = inputElem.checked;



                 var rowData = {};

                 rowData.inputType = inputElem.getAttribute('type');

                 rowData.inputValue = value;

                 data.push(rowData);

             }

         }

     }



     function startExec() {

         gatherData();

         for (i = 0; i < data.length; i++) {

             console.log(data[i].inputType);

             console.log(data[i].inputValue);

         }

     }

     //just wait for the dom to load, and then execute the function for testing

     document.addEventListener(DOMContentLoaded, startExec, false);

2nd Revision

 function getData() {



     var table = document.getElementById('dataTable');

     if (table === null)

         return;



     if (table.rows[0].cells.length <= 1)

         return;



     var data = [];

     for (l = 0; l < table.rows[0].cells.length; l++) {

         data.push({

             items: [],

             name: ColumnNumber + l

         });

     }



     for (i = 1; i < table.rows.length; i++) {

         var cells = table.rows[i].cells;

         for (c = 0; c < cells.length; c++) {

             var inputElem = cells[c].children[0];

             data[c].items.push({

                 inputType: inputElem.getAttribute('type'),

                 inputValue: inputElem.value

             });

         }

     }

     printData(data);

 }



 function printData(data) {

     for (i = 0; i < data.length; i++) {

         for (k = 0; k < data[i].items.length; k++) {

             console.log(data[i].items[k].inputValue);

         }

     }

 }



 document.addEventListener(DOMContentLoaded, getData(), false);

It's great that you're starting off and doing the table manipulation yourself, and I would recommend continuing that, if you want to peak into a bigger codebase I would recommend checking out jTable's. Even though it's a jQuery plugin, you'll still be able to learn something from looking at the code structure for handling all the logic surrounding building a table according to a dataset and adding records etc.