 |
| 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);
<!-- $arr.push({
// date: tr.cells[0].innerText,
//activity: tr.cells[1].innerText
// }); -->
}
}
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>
