checkbox cheked row value in json

<!doctype html>
<html lang="en">
<body>
    <table id="myTable">
        <tr>
            <td>Date</td>
            <td>Activity</td>
            <td>Time</td>
            <td>Done?</td>
        </tr>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td><input type="checkbox" class="checks" /></td>
        </tr>
        <tr>
            <td>dhaval</td>
            <td>sss</td>
            <td>test</td>
            <td>test</td>
            <td><input type="checkbox" class="checks" /></td>
        </tr>
        <tr>
            <td>jaty</td>
            <td>dddd</td>
            <td>test</td>
            <td>test</td>
            <td><input type="checkbox" class="checks" /></td>
        </tr>
        <tr>
            <td>jaty</td>
            <td>dddd</td>
            <td>test</td>
            <td>test</td>
            <td><input type="checkbox" class="checks" /></td>
        </tr>
    </table>

    <button id="buttonforsend" onclick="SendData()">Send greenmarked data!</button>

    <pre id="jsonString"></pre>

    <script>
        function AddRow() {

            var $check = document.createElement("INPUT");
            $check.setAttribute("type", "checkbox");
            $check.setAttribute("checked", "true");
            $check.setAttribute("class", "checks");
            $check.addEventListener("click", toggleClass);

            function toggleClass() {

                if (this.checked == true) {
                    this.parentNode.parentNode.className = "Green";

                } else {
                    this.parentNode.parentNode.className = "Red";
                }

            }

            var date = document.getElementById("Datum");
            var activity = document.getElementById("Activity");
            var time = document.getElementById("time");

            var table = document.getElementById("myTable");

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            row.insertCell(0).innerHTML = date.value;
            row.insertCell(1).innerHTML = activity.value;
            row.insertCell(2).innerHTML = time.value;
            row.insertCell(3).appendChild($check).value;

        }

        function addTable() {

            var myTableDiv = document.getElementById("myDynamicTable");

            var table = document.createElement('TABLE');
            table.border = '1';

            var tableBody = document.createElement('TBODY');
            table.appendChild(tableBody);

            for (var i = 0; i < 3; i++) {
                var tr = document.createElement('TR');
                tableBody.appendChild(tr);

                for (var j = 0; j < 4; j++) {
                    var td = document.createElement('TD');
                    td.width = '75';
                    td.appendChild(document.createTextNode("Cell " + i + "," + j));
                    tr.appendChild(td);
                }
            }
            myTableDiv.appendChild(table);

        }

        function CheckData() {

            var table = document.getElementById("myTable");
            var max = 0;
            for (var i = 0; i < table.rows.length; i++) {
                if (max < table.rows[i].cells.length)
                    max = table.rows[i].cells.length;
            }

            var $arr = [];
            var arr1 = {};
            var tb = document.getElementById("myTable");

            var checks = tb.querySelectorAll(".checks"),
                chk, tr;
            for (var i = 0; i < checks.length; i++) {
                chk = checks[i];
                if (chk.checked) {
                    tr = chk.closest ? chk.closest('tr') : chk.parentNode.parentNode;

                    for (var j = 0; j < max; j++) {
                        //arr1.push('date :'+tr.cells[i].innerText);
                        arr1[j] = tr.cells[j].innerText;
                    }
                    $arr.push(arr1);
                    
                }
            }
            return $arr;
        }

        function SendData() {

            var obj = {
                test: CheckData()
            };
            var jsonString = "jsonString=" + (JSON.stringify(obj));

            document.getElementById('jsonString').innerHTML = jsonString;
            return; // for testing

            var xmlhttp = new XMLHttpRequest();

            xmlhttp.open("POST", "JSON_H.php", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form- urlencoded");
            xmlhttp.setRequestHeader("Content-Length", jsonString.length);

            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState === 4 && (xmlhttp.status === 200)) {
                    alert(xmlhttp.responseText);
                }
            };
            xmlhttp.send(jsonString);
        }
    </script>
</body>
</html>

w3package

checkbox cheked row value in json

Share this