当用户单击每一行时，将数据追加到json

时间：2019-07-17 13:56:43

标签： javascript json

我有一个来自sql服务器的数据正在html表中显示。每行都有一个<tr data-json='$Serial_No' >，当用户选择一行时，它会放在

var UserPick = $(this).data('json');

然后使用Serial_No从所有数据中筛选出并仅选择该行。每当用户选择一行时，如何获取它以追加数据。

这是我的功能

    <script type="text/javascript">

     $(function()
     {
          $('tr').on('click',function()
          {
           //when the user picks a row it is stored here.
            var UserPick = $(this).data('json');

    //this is getting all the data the user looked for it can be over 50 rows of info.
            var mike = $('#backup').text(); 

    //this parse the json data
            var objMike = JSON.parse(mike);

            //console.log(mike);

                     //this then filters all the of the parse json data and search for the users picked Serial_No.  

    // How do I append the user picked Serial_No so that each time the users picks a row it doesn't wipe out the NewMike ?

            var NewMike =  objMike.filter(function(ss) 
                {
                    return ss.Serial_No == UserPick;

                });

            //console.log(NewMike); 
    //this puts that new filtered data in to a UpdateJson 
      var UpdateJson = JSON.stringify(NewMike)

      $("#reload").show();

    //then puts it in to a div text for displaying.
    $('#mike').text(UpdateJson);

    //$('#printButton').click

          });

    });

    </script>

<div id='backup'name='backup'  ><?php echo json_encode($json); ?> </div>

<div id='mike' name='mike' ><?php echo json_encode($json); ?></div>

所以如果输入的是这个

[{"Serial_No":"001","Barcode":"M139010-001","part":"F06984-0064","DESCR":"BACC69CCC0064J\/BOEIN, REV R","MFG":"M139010-001","Cable_Length":"64.375 Inches","Test_A":".01","Test_B":".07"},{"Serial_No":"002","Barcode":"M139010-002","part":"F06984-0064","DESCR":"BACC69CCC0064J\/BOEIN, REV R","MFG":"M139010-002","Cable_Length":"64.625 Inches","Test_A":".02","Test_B":".06"},{"Serial_No":"003","Barcode":"M139010-003","part":"F06984-0064","DESCR":"BACC69CCC0064J\/BOEIN, REV R","MFG":"M139010-003","Cable_Length":"64.625 Inches","Test_A":".04","Test_B":".11"},{"Serial_No":"004","Barcode":"M139010-004","part":"F06984-0064","DESCR":"BACC69CCC0064J\/BOEIN, REV R","MFG":"M139010-004","Cable_Length":"64.625 Inches","Test_A":".08","Test_B":".03"},{"Serial_No":"005","Barcode":"M139010-005","part":"F06984-0064","DESCR":"BACC69CCC0064J\/BOEIN, REV R","MFG":"M139010-005","Cable_Length":"64.625 Inches","Test_A":".13","Test_B":".02"},{"Serial_No":"006","Barcode":"M139010-006","part":"F06984-0064","DESCR":"BACC69CCC0064J\/BOEIN, REV R","MFG":"M139010-006","Cable_Length":"64.625 Inches","Test_A":".03","Test_B":".10"},{"Serial_No":"007","Barcode":"M139010-007","part":"F06984-0064","DESCR":"BACC69CCC0064J\/BOEIN, REV R","MFG":"M139010-007","Cable_Length":"64.625 Inches","Test_A":".03","Test_B":".07"},{"Serial_No":"008","Barcode":"M139010-008","part":"F06984-0064","DESCR":"BACC69CCC0064J\/BOEIN, REV R","MFG":"M139010-008","Cable_Length":"64.625 Inches","Test_A":".02","Test_B":".09"},{"Serial_No":"009","Barcode":"M139010-009","part":"F06984-0064","DESCR":"BACC69CCC0064J\/BOEIN, REV R","MFG":"M139010-009","Cable_Length":"64.75 Inches","Test_A":".01","Test_B":".11"},{"Serial_No":"010","Barcode":"M139010-010","part":"F06984-0064","DESCR":"BACC69CCC0064J\/BOEIN, REV R","MFG":"M139010-010","Cable_Length":"64.625 Inches","Test_A":".02","Test_B":".09"},{"Serial_No":"011","Barcode":"M139010-011","part":"F06984-0064","DESCR":"BACC69CCC0064J\/BOEIN, REV R","MFG":"M139010-011","Cable_Length":"64.625 Inches","Test_A":".02","Test_B":".10"},{"Serial_No":"012","Barcode":"M139010-012","part":"F06984-0064","DESCR":"BACC69CCC0064J\/BOEIN, REV R","MFG":"M139010-012","Cable_Length":"64.625 Inches","Test_A":".05","Test_B":".04"},{"Serial_No":"013","Barcode":"M139010-013","part":"F06984-0064","DESCR":"BACC69CCC0064J\/BOEIN, REV R","MFG":"M139010-013","Cable_Length":"64.625 Inches","Test_A":".06","Test_B":".02"}]

用户选择Serial_No 1,5,9，输出必须为

[{"Serial_No":"001","Barcode":"M139010-001","part":"F06984-0064","DESCR":"BACC69CCC0064J\/BOEIN, REV R","MFG":"M139010-001","Cable_Length":"64.375 Inches","Test_A":".01","Test_B":".07"},{"Serial_No":"005","Barcode":"M139010-005","part":"F06984-0064","DESCR":"BACC69CCC0064J\/BOEIN, REV R","MFG":"M139010-005","Cable_Length":"64.625 Inches","Test_A":".13","Test_B":".02"},{"Serial_No":"009","Barcode":"M139010-009","part":"F06984-0064","DESCR":"BACC69CCC0064J\/BOEIN, REV R","MFG":"M139010-009","Cable_Length":"64.75 Inches","Test_A":".01","Test_B":".11"}]

当前代码未追加。因此，如果我选择第1行，然后单击第2行，它只会显示用户选择的第2行的最后一行。

这是其中混有php的html 

Echo "<tr data-json='$Serial_No' ><td >".$row3["Work Order No"]."-". $row3["Serial No"]."</td>";
                    Echo "<td>".$part."</td>";
                    Echo "<td>".$DESCR."</td>";
                    Echo "<td>" .$row3["Work Order No"]."-". $row3["Serial No"]."</td>";
                    Echo "<td>". $row3["ValueInches"]."</td>";

                    IF(number_format($row3["Value1"],2)[0] < "1"){

                    Echo "<td>".substr($row3["SS1"], -1)." " .substr(number_format($row3["Value1"],2), 1)."</td>";

                }Else{
                    Echo "<td>".substr($row3["SS1"], -1)." " .number_format($row3["Value1"],2)."</td>";

                }

                IF(number_format($row3["Value2"],2)[0] < "1"){
                    Echo "<td>".substr($row3["SS2"], -1)." " .substr(number_format($row3["Value2"],2), 1)."</td> ";

                }Else{
                    Echo "<td>".substr($row3["SS2"], -1)." " .number_format($row3["Value2"],2)."</td></tr>";


                }

页面的显示方式

What the user see when the page loads the data

4 个答案:

答案 0 :(得分：0)

好的，到目前为止我已经掌握了

<script type="text/javascript">

var store = [] ;

 $(function()
 {
      $('tr').on('click',function()
      {
        var UserPick = $(this).data('json');

        var mike = $('#backup').text(); 

        var objMike = JSON.parse(mike);

        //console.log(objMike);


        var NewMike =  objMike.filter(function(ss) 
            {

                return ss.Serial_No == UserPick;

            });



                store.push(NewMike);



        console.log(store);

  var UpdateJson = JSON.stringify(store)

  alert(UpdateJson);

  $("#reload").show();

$('#mike').text(UpdateJson);

//$('#printButton').click

      });

});

</script>

Store的输出为

[[{"Serial_No":"013","Barcode":"M139010-013","part":"F06984-0064","DESCR":"BACC69CCC0064J/BOEIN, REV R","MFG":"M139010-013","Cable_Length":"64.625 Inches","Test_A":".06","Test_B":".02"}],[{"Serial_No":"012","Barcode":"M139010-012","part":"F06984-0064","DESCR":"BACC69CCC0064J/BOEIN, REV R","MFG":"M139010-012","Cable_Length":"64.625 Inches","Test_A":".05","Test_B":".04"}]]

但是格式不正确。必须是

[{"Serial_No":"013","Barcode":"M139010-013","part":"F06984-0064","DESCR":"BACC69CCC0064J/BOEIN, REV R","MFG":"M139010-013","Cable_Length":"64.625 Inches","Test_A":".06","Test_B":".02"},{"Serial_No":"012","Barcode":"M139010-012","part":"F06984-0064","DESCR":"BACC69CCC0064J/BOEIN, REV R","MFG":"M139010-012","Cable_Length":"64.625 Inches","Test_A":".05","Test_B":".04"}]

我也没有任何逻辑，因此如果用户连续单击某行，它只会不断地重复添加。如果行已超出，则需要从var存储中删除该行；否则，只需添加该行。

答案 1 :(得分：0)

这是有效的答案

<script type="text/javascript">

var store = [] ;
var bck = {};

 $(function()
 {
      $('tr').on('click',function()
      {
        var UserPick = $(this).data('json');

        var mike = $('#backup').text(); 

        var objMike = JSON.parse(mike);

        //console.log(objMike);


        var NewMike =  objMike.filter(function(ss) 
            {

                return ss.Serial_No == UserPick;

            });


    //this lets you pick more then 1 row for printing.      
var tyson = NewMike.pop();
if( bck[tyson.Serial_No] == undefined) {
    bck[tyson.Serial_No] = true;
    store.push(tyson);
} else {
    bck[tyson.Serial_No] = null;
    for(var i=0;i<store.length;i++) // parse whole array until you find the guy you want to remove
            if(store[i].Serial_No == tyson.Serial_No) // this is what you was looking for ;-)
                   store.splice(i, 1); // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/splice 
}



        //console.log(store);

  var UpdateJson = JSON.stringify(store)

  //alert(UpdateJson);

  $("#reload").show();

$('#mike').text(UpdateJson);

//$('#printButton').click

      });

});

</script>

答案 2 :(得分：-1)

看下面的例子。首先，您需要将动作json数组存储在一个可以稍后恢复的位置（我使用var jsons = [];作为全局数组）。然后查找实际的ID是否已在数组中。如果是这样，请将其删除，否则将其添加并再次存储该阵列。

var jsons = [];

$(".row").on('click', function() {
  var data = JSON.parse(this.dataset.json);
  
  // if find the id, remove it
  if (jsons.filter(r => r.id == data.id).length > 0) {
    jsons = jsons.filter(r => r.id != data.id);
  } else {
    jsons.push(data);
  }
  $("#result").html(JSON.stringify(jsons));
});
.row {
  border: 1px solid black;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="row" data-json='{"id":1}'>
    <td>Id 1</td>
  </tr>
  <tr class="row" data-json='{"id":2}'>
    <td>Id 2</td>
  </tr>
  <tr class="row" data-json='{"id":3}'>
    <td>Id 3</td>
  </tr>
  <tr class="row" data-json='{"id":4}'>
    <td>Id 4</td>
  </tr>
</table>

<div id="result"></div>

答案 3 :(得分：-1)

好吧，我尝试过

var jsons = [];

 $(function()
 {
      $(".row").on("click", function()
      {
      var data = JSON.parse(this.dataset.json);





  if (jsons.filter(r => r.Serial_No == data.Serial_No).length > 0) {
    jsons = jsons.filter(r => r.Serial_No != data.Serial_No);
  } else {
    jsons.push(data);
  }

  $("#mike").html(JSON.stringify(jsons));



    console.log(jsons); 




      });

});

我在

上遇到语法错误 
if (jsons.filter(r => r.Serial_No == data.Serial_No).length > 0) {
相关问题
最新问题