Question

我正在处理用户可以输入一些数据，日期，活动和时间的事情。当用户点击添加时，它会将其添加到表中。此表包含已检查的4个单元格（复选框）。现在重点是用户可以添加许多带有数据的行，然后单击复选框，如果未选中它将不会发送到JSON字符串，但是应该发送检查的行！

问题是如果我有一行是绿色而另一行是红色，当我点击发送绿色标记数据时，它仍会打印出所有行。

以下是代码：

<!doctype html>
<html lang="en">
<head>
<style>
table, td {
border: 1px solid black;
padding: 0 40px 0 40px;
}

tr {
background-color: #00FF00;
}

.Green {
background-color: #00FF00;
}

.Red {
background-color: #FF0000;
}

</style>
<meta charset="utf-8">

</head>
<body>

<form>
Date: <input type="text" id="Datum" name="Date">
Activ: <input type="text" id="Activity" name="Activ">
Time: <input type="text" id="time" name="Time">
</form>

<button onclick="AddRow()">Add Data!</button>



<table id="myTable">
<tr>        
    <td>Date</td>
    <td>Activity</td>
    <td>Time</td>
    <td>Done?</td>
</tr>
</table>

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


 <script>

 function AddRow() 
 {

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

  function toggleClass() {
  console.log("clicked");

   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 $arr = [];

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

var check = document.getElementById("checks");

for (var i = 0, row; row = tb.rows[i]; i++) {  

for (var j = 0, col; col = row.cells[j]; j++) {  

  if(check.checked == true) {
    $arr.push(col.firstChild.nodeValue);
  }

 }    
 } 
 return $arr;
 }


 function SendData() 
 {

 var obj = {test: CheckData()}; 
 var jsonString = "jsonString=" + (JSON.stringify(obj));
 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>

Answer 1

您可以在表格中找到所有已选中的复选框，然后仅使用选中的复选框添加行的值

＆＃13;

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 $arr = [];

  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;
      $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);
}

＆＃13;

table,
td {
  border: 1px solid black;
  padding: 0 40px 0 40px;
}
tr {
  background-color: #00FF00;
}
.Green {
  background-color: #00FF00;
}
.Red {
  background-color: #FF0000;
}

＆＃13;

<form>
  Date:
  <input type="text" id="Datum" name="Date">Activ:
  <input type="text" id="Activity" name="Activ">Time:
  <input type="text" id="time" name="Time">
</form>

<button onclick="AddRow()">Add Data!</button>



<table id="myTable">
  <tr>
    <td>Date</td>
    <td>Activity</td>
    <td>Time</td>
    <td>Done?</td>
  </tr>
</table>

<button id="buttonforsend" onclick="SendData()">Send greenmarked data!</button>

<pre id="jsonString"></pre>

＆＃13;

由于元素的ID必须唯一，因此复选框的id属性更改为class

循环复选框值以检查是否已选中

1 个答案: