【问题标题】:post data from table row like json format从表格行中发布数据,如 json 格式
【发布时间】:2011-08-19 01:11:30
【问题描述】:

这和我上次的question( 注意:我已经在那里得到了一些好的答案)。我正在做一个过滤程序。我没有包括这个问题,因为我认为只要我知道如何从行中获取数据,我就更容易添加文本。但令我沮丧的是,直到现在我都无法编写出好的程序。

我目前正在使用这个 javascript 代码(感谢 Awea):

$('#out').click(function(){    
   $('table tr').each(function(){
      var td = '';
      $(this).find('option:selected').each(function(){
         td = td + ' ' + $(this).text();
      });
      td = td + ' ' + $(this).find('input').val();
      alert(td);
   });
})

我的问题是:如何在行中的数据之前添加文本?例如,此代码警报 第一行像data1.1 data1.2 data1.3,

然后第二行像data2.1 data2.2 data2.3,

我希望我的输出像这样显示

[ {"name":"data1.1","comparison":"data1.2", "value":"data1.3"}, {"name":"data2.1","comparison":"data2.2", "value":"data2.3"}, {"name":"data3.1","comparison":"data3.2", "value":"data3.3"} {.....and so on......}]

但在此之前,我想检查一行中的所有第一个单元格是否不为空。如果为空,则跳过该行然后继续下一行。

有没有人可以帮帮我,拜托...

【问题讨论】:

  • 您应该添加 JQuery 标记,因为它是 javascript 本身之外的库。

标签: javascript jquery html json data-retrieval


【解决方案1】:

my answer to your previous question 为基础,参见http://jsfiddle.net/evbUa/1/

一旦您将数据保存在 javascript 对象中(在我的示例中为 dataArray),您可以按照我的示例自己编写 JSON,但您会发现使用诸如 JSON-js 之类的库要容易得多(请参阅this 也)。

// object to hold your data
function dataRow(value1,value2,value3) {
    this.name = value1;
    this.comparison = value2;
    this.value = value3;
}

$('#out').click(function(){   

    // create array to hold your data
    var dataArray = new Array();

    // iterate through rows of table
    for(var i = 1; i <= $("table tr").length; i++){

        // check if first field is used
        if($("table tr:nth-child(" + i + ") select[class='field']").val().length > 0) {

            // create object and push to array
            dataArray.push(    
                new dataRow(
                    $("table tr:nth-child(" + i + ") select[class='field']").val(),
                    $("table tr:nth-child(" + i + ") select[class='comp']").val(),
                    $("table tr:nth-child(" + i + ") input").val())
            );
        }

    }

    // consider using a JSON library to do this for you
    for(var i = 0; i < dataArray.length; i++){
        var output = "";
        output = output + '{"name":"data' + (i + 1) + '.' + dataArray[i].name + '",';
        output = output + '"comparison":"data' + (i + 1) + '.' + dataArray[i].comparison + '",';
        output = output + '"value":"data' + (i + 1) + '.' + dataArray[i].value + '"}';
        alert(output);
    }
})

【讨论】:

    【解决方案2】:

    var a = []; a[0] = "data1.1 data1.2 data1.3" a[1] = "data1.6 data1.2 data1.3" var jsonobj = {}; 变量 c = [] for (var i = 0;i

    警报(c); //它将给出 ["{"name":"data1.1","comp...1.2","value":"data1.3"}", "{"name":"data1.6", "comp...1.2","value":"data1.3"}"]

    你必须包含来自 JSON.stringify 的函数库 https://github.com/douglascrockford/JSON-js/blob/master/json2.js

    希望对你有帮助

    【讨论】:

    • 感谢您的回答,但如果我的数据包含空格,它不会提供良好的输出。也许我只需要将拆分('')替换为(,)。但是谢谢你给我一个想法。
    • 嘿,它现在可以工作了...我确实将您的 split(' ') 更改为 (,)。再次感谢您。
    【解决方案3】:

    您需要在这里做两件事。首先将数据放入对象数组中,其次获取字符串表示形式。

    我没有对此进行测试,但它应该可以让您大致了解该做什么。

    编辑 请看一下我制作的这个 JS-Fiddle 示例。 http://jsfiddle.net/4Nr9m/52/

    $(document).ready(function() {
        var objects = new Array();
        $('table tr').each(function(key, value) {
            if($(this).find('td:first').not(':empty')) {
            //loop over the cells
            obj = {};
            $(this).find('td').each(function(key, value) {
                    var label = $(this).parents('table').find('th')[key].innerHTML;
                    obj[label] = value.innerHTML;
    
            });
            objects.push(obj);
    
            }
        });
        //get JSON.
        var json = objects.toSource();
        $('#result').append(json);
    });
    

    【讨论】:

    • 嘿,谢谢你。顺便说一句,您的链接没有显示结果。我只复制并粘贴上面的代码来显示结果。而且,如果第一个单元格为空,它不会跳过该行。还有一件事,如何在第一行之前获得空的'{}'?..再次感谢您的想法和答案。
    • 对不起,我不知道它是如何得到空白对象的。也许您可以在您的站点上和使用 Firefox 调试它(带有断点),您会看到的。 jsfiddle很难调试。
    • 给你。需要JSON.stringify().not(':empty').length &gt; 0 jsfiddle.net/4Nr9m/59
    • @Keyo。嘿,谢谢这个堡垒。还有一个问题。我正在使用选择标签和文本框。我想获取并仅显示选定的值。我该怎么做。
    • 试试obj[label] = $(value).find(':input')[0].val();。周围有很多文档,您可以通过 google get input element value jquery 或类似的方式找到您需要使用的方法。
    猜你喜欢
    • 2010-11-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多