w3package: json

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>

<body>
    <table class="table" id="tableCompleted" border="2">
        <thead>
            <tr>
                <th>Name</th>
                <th>Language</th>
                <th>Databased</th>
                <th>Script</th>
                <th>Programming</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Laravel</td>
                <td>PHP</td>
                <td>MySQL</td>
                <td>mysqli</td>
                <td>Javascript</td>
            </tr>
            <tr>
                <td>Java</td>
                <td>c</td>
                <td>c++</td>
                <td>c#</td>
                <td>Oracle</td>
            </tr>
            <tr>
                <td>Mean.js</td>
                <td>Android</td>
                <td>IOS</td>
                <td>Magento</td>
                <td>HTML</td>
            </tr>
        </tbody>
    </table>
    <script>
        $('td').on('click', function() {
            var $this = $(this);
            var $input = $('<input>', {
                value: $this.text(),
                type: 'text',
                blur: function() {
                    $this.text(this.value);
                },
                keyup: function(e) {
                    if (e.which === 13) $input.blur();
                }
            }).appendTo($this.empty()).focus();
        });
    </script>
</body>

</html>

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

dynemic value change in table jquery

checkbox cheked row value in json

Kategori

Kategori