Fatal编程技术网
  • javascript/
  • Javascript 当用户单击每行时，将数据附加到json

Javascript 当用户单击每行时，将数据附加到json

javascript json

Javascript 当用户单击每行时，将数据附加到json,javascript,json,Javascript,Json,我有来自sql server的数据显示在html表中。每一行都有一个，当用户选择一行时，它将 var UserPick = $(this).data('json'); 然后使用串行_No从所有数据中筛选出行。如何让它在用户每次选择一行时追加数据 这是我的功能 <script type="text/javascript"> $(function() { $('tr').on('click',function() {

我有来自sql server的数据显示在html表中。每一行都有一个
，当用户选择一行时，它将

var UserPick = $(this).data('json');
然后使用串行_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>
用户选择序列号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"}]

[{"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"}]
当前代码没有附加。因此，如果我选择第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>";


                }

Echo.“$row3[“工单编号”]。”-”$第3行[“序列号]”；
附和“$部分”；
回显“$DESCR.”；
Echo“$row3[“工单编号”]。-”$第3行[“序列号]”；
“回声”$第3行[“值英寸]”；
如果（数字格式（$row3[“Value1”]，2）[0]<“1”）{
Echo“.substr（$row3[“SS1”]，-1）。”.substr（数字格式（$row3[“Value1”]，2），1）。”；
}否则{
Echo“.substr（$row3[“SS1”]，-1）。”.number_格式（$row3[“Value1”]，2）。”；
}
如果（数字格式（$row3[“Value2”]，2）[0]<“1”）{
Echo“.substr（$row3[“SS2”]，-1）。”.substr（number_格式（$row3[“Value2”]，-2），1）。”；
}否则{
Echo“.substr（$row3[“SS2”]，-1）。”.number_格式（$row3[“Value2”]，2）。”；
}
这就是页面的显示方式

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

var-jsons=[]；
$（“.row”）。在（'click'，function（）上{
var data=JSON.parse（this.dataset.JSON）；
//如果找到id，请将其删除
if（jsons.filter（r=>r.id==data.id）.length>0）{
jsons=jsons.filter（r=>r.id！=data.id）；
}否则{
推送（数据）；
}
$（“#result”）.html（JSON.stringify（jsons））；
});

.row{
边框：1px纯黑；
}



Id 1
Id 2
Id 3
Id 4

好的，我试过了


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) {



好的，到目前为止我有这个


<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> 


但它的格式不正确。这是必须的


[{"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"}]



[{"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存储中删除该行，否则只需添加一行即可
 以下是有效的答案


<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>




var存储=[]；
var bck={}；
$（函数（）
{
$（'tr'）。在（'click'，function（）上
{
var UserPick=$（this.data（'json'）；
var mike=$（“#备份”）.text（）；
var objMike=JSON.parse（mike）；
//console.log（objMike）；
var NewMike=objMike.filter（函数（ss）
{
返回ss.Serial_No==UserPick；
});
//这使您可以选择多于1行进行打印。
var tyson=NewMike.pop（）；
if（bck[tyson.Serial_No]==未定义）{
bck[tyson.Serial_No]=真；
商店。推（泰森）；
}否则{
bck[tyson.Serial_No]=null；

对于（var i=0；iHi）我们可以获得html表格的代码片段吗OK我已经用表格的html部分和用户看到的内容的屏幕截图更新了帖子关于用户选择的内容它将该对象添加到一个新的json数组中，因此ver jsons=[]；NewMike=json.add（jsons）如果这样做，NewMike的值将是json的长度。json.add不存在。那么使用.concat这样的操作如何？每次用户单击一行，它就会附加到一个字符串中。然后使用json.stringify并将其放在div文本中。你可以做到这一点，我不知道如何编写。试试这个。
jsons.filter（函数（r）{return r.Serial\u No==data.Serial\u No}）。长度
No不喜欢这样