Fatal编程技术网
  • javascript/
  • Javascript 使用select将html表转换为Json

Javascript 使用select将html表转换为Json

javascript html jquery json

Javascript 使用select将html表转换为Json,javascript,html,jquery,json,Javascript,Html,Jquery,Json,当html表包含select标记时，我很难将其内容正确地导出到JSON表。我需要导出选定的选项值，而不是选择输入框的全部内容（例如：“动物”：“狗\n猫\n仓鼠\n鹦鹉\n蜘蛛\n金鱼”应为“动物”：“猫”） 我使用的html代码是： <html> <body> <table id="students" border="1"> <thead> <tr> &l

当html表包含select标记时，我很难将其内容正确地导出到JSON表。我需要导出选定的选项值，而不是选择输入框的全部内容（例如：“动物”：“狗\n猫\n仓鼠\n鹦鹉\n蜘蛛\n金鱼”应为“动物”：“猫”）

我使用的html代码是：

<html>
<body>
  <table id="students" border="1">
    <thead>
      <tr>
        <th>Name</th>
         <th> Animal </th>
        <th>Age</th>
        <th>Grade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Oscar</td>
             <td>  <select name="pets" id="pet-select">

    <option value="dog">Dog</option>
    <option value="cat" selected>Cat</option>
    <option value="hamster">Hamster</option>
</select>
 </td>
        <td>23</td>
        <td>16.5</td>
      </tr>
      <tr>
        <td>Antonio</td>
        <td>  <select name="pets" id="pet-select">

    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster" selected>Hamster</option>
  
</select>
 </td>
        <td>32</td>
        <td>14</td>
      </tr>
      <tr>
        <td>Jessica</td>
             <td>  <select name="pets" id="pet-select">

    <option value="dog" selected >Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
  
</select>
 </td>
        <td>21</td>
        <td>19</td>
      </tr>
    </tbody>
  </table>
  <br>
  <button id="run">Convert!</button>
</body>
</html>


名称
动物
年龄
等级
奥斯卡
狗
猫
仓鼠
23
16.5
安东尼奥
狗
猫
仓鼠
32
14
杰西卡
狗
猫
仓鼠
21
19


转换
而JS：

/*! tabletojson - v0.11.1 - Daniel White */ ! function(a) {
    "use strict";
    a.fn.tableToJSON = function(b) {
        var c = {
            ignoreColumns: [],
            onlyColumns: null,
            ignoreHiddenRows: !0,
            ignoreEmptyRows: !1,
            headings: null,
            allowHTML: !1,
            includeRowId: !1,
            textDataOverride: "data-override",
            textExtractor: null
        };
        b = a.extend(c, b);
        var d = function(a) {
                return void 0 !== a && null !== a
            },
            e = function(c) {
                return d(b.onlyColumns) ? -1 === a.inArray(c, b.onlyColumns) : -1 !== a.inArray(c, b.ignoreColumns)
            },
            f = function(b, c) {
                var e = {},
                    f = 0;
                return a.each(c, function(a, c) {
                    f < b.length && d(c) && (e[b[f]] = c, f++)
                }), e
            },
            g = function(c, d, e) {
                var f = a(d),
                    g = b.textExtractor,
                    h = f.attr(b.textDataOverride);
                return null === g || e ? a.trim(h || (b.allowHTML ? f.html() : d.textContent || f.text()) || "") : a.isFunction(g) ? a.trim(h || g(c, f)) : "object" == typeof g && a.isFunction(g[c]) ? a.trim(h || g[c](c, f)) : a.trim(h || (b.allowHTML ? f.html() : d.textContent || f.text()) || "")
            },
            h = function(c, d) {
                var e = [],
                    f = b.includeRowId,
                    h = "boolean" == typeof f ? f : "string" == typeof f ? !0 : !1,
                    i = "string" == typeof f == !0 ? f : "rowId";
                return h && "undefined" == typeof a(c).attr("id") && e.push(i), a(c).children("td,th").each(function(a, b) {
                    e.push(g(a, b, d))
                }), e
            },
            i = function(a) {
                var c = a.find("tr:first").first();
                return d(b.headings) ? b.headings : h(c, !0)
            },
            j = function(c, h) {
                var i, j, k, l, m, n, o, p = [],
                    q = 0,
                    r = [];
                return c.children("tbody,*").children("tr").each(function(c, e) {
                    if (c > 0 || d(b.headings)) {
                        var f = b.includeRowId,
                            h = "boolean" == typeof f ? f : "string" == typeof f ? !0 : !1;
                        n = a(e);
                        var r = n.find("td").length === n.find("td:empty").length ? !0 : !1;
                        !n.is(":visible") && b.ignoreHiddenRows || r && b.ignoreEmptyRows || n.data("ignore") && "false" !== n.data("ignore") || (q = 0, p[c] || (p[c] = []), h && (q += 1, "undefined" != typeof n.attr("id") ? p[c].push(n.attr("id")) : p[c].push("")), n.children().each(function() {
                            for (o = a(this); p[c][q];) q++;
                            if (o.filter("[rowspan]").length)
                                for (k = parseInt(o.attr("rowspan"), 10) - 1, m = g(q, o), i = 1; k >= i; i++) p[c + i] || (p[c + i] = []), p[c + i][q] = m;
                            if (o.filter("[colspan]").length)
                                for (k = parseInt(o.attr("colspan"), 10) - 1, m = g(q, o), i = 1; k >= i; i++)
                                    if (o.filter("[rowspan]").length)
                                        for (l = parseInt(o.attr("rowspan"), 10), j = 0; l > j; j++) p[c + j][q + i] = m;
                                    else p[c][q + i] = m;
                            m = p[c][q] || g(q, o), d(m) && (p[c][q] = m), q++
                        }))
                    }
                }), a.each(p, function(c, g) {
                    if (d(g)) {
                        var i = d(b.onlyColumns) || b.ignoreColumns.length ? a.grep(g, function(a, b) {
                                return !e(b)
                            }) : g,
                            j = d(b.headings) ? h : a.grep(h, function(a, b) {
                                return !e(b)
                            });
                        m = f(j, i), r[r.length] = m
                    }
                }), r
            },
            k = i(this);
        return j(this, k)
    }
}(jQuery);

// Code goes here

$('#run').click(function() {
    var table = $('#students').tableToJSON({
        extractor: function($index, $cell) {
            return {
                name: $cell.find('td').value
            };
        }
    });
    alert(JSON.stringify(table));
});

/*！tabletojson-v0.11.1-Daniel White*/！职能（a）{
“严格使用”；
a、 fn.tableToJSON=函数（b）{
变量c={
忽略列：[]，
仅列：null，
ignoreHiddenRows:！0，
ignoreEmptyRows:！1，
标题：空，
allowHTML:！1，
includeRowId:！1，
textDataOverride：“数据覆盖”，
文本提取器：null
};
b=a.延伸（c，b）；
var d=函数（a）{
返回void 0！==a&&null！==a
},
e=功能（c）{
返回d（b.onlyColumns）？-1==a.inArray（c，b.onlyColumns）：-1！==a.inArray（c，b.ignoreColumns）
},
f=函数（b，c）{
变量e={}，
f=0；
返回a.each（c，function（a，c）{
f0 | | d（b.标题））{
var f=b.includeRowId，
h=“boolean”==typeof f？f:“string”==typeof f？！0:！1；
n=a（e）；
var r=n.find（“td”）.length==n.find（“td:empty”）.length？！0:！1；
！n.is（“：visible”）&&b.ignoreHiddenRows | | r&&b.ignoreEmptyRows | | n.data（“：ignore”）&&b.ignoreHiddenRows | | r&&b.ignoreEmptyRows | | | n.data（“ignore”）&“false”！=n.data（“ignore”）=n.data（“ignore”）| | |（q=0，p[c]|（p[c]=[]），h&（q+=1，“未定义”！=n.attr（“id”）？p[c”）：push{
对于（o=a（this）；p[c][q]；）q++；
if（o.filter（“[rowspan]”）长度）
对于（k=parseInt（o.attr（“rowspan”），10）-1，m=g（q，o），i=1；k>=i；i++）p[c+i]| |（p[c+i]=[]），p[c+i][q]=m；
if（o.filter（“[colspan]”）长度）
对于（k=parseInt（o.attr（“colspan”），10）-1，m=g（q，o），i=1；k>=i；i++）
if（o.filter（“[rowspan]”）长度）
对于（l=parseInt（o.attr（“rowspan”），10），j=0；l>j；j++）p[c+j][q+i]=m；
否则p[c][q+i]=m；
m=p[c][q]|g（q，o），d（m）&（p[c][q]=m），q++
}))
}
})每个（p，函数（c，g）{
如果（d（g））{
var i=d（b.onlyColumns）| | b.ignoreColumns.length？a.grep（g，函数（a，b）{
返回！e（b）
})：g，
j=d（b.标题）？h:a.grep（h，函数（a，b）{
返回！e（b）
});
m=f（j，i），r[r.长度]=m
}
})，r
},
k=i（这个）；
返回j（这个，k）
}
}（jQuery）；
//代码在这里
$（“#运行”）。单击（函数（）{
var table=$（“#学生”）.tableToJSON({
提取器：函数（$index，$cell）{
返回{
名称：$cell.find（'td'）.value
};
}
});
警报（JSON.stringify（表））；
});
您可以通过以下方式检查结果

一种方法是使用提取器中的索引。当index为1时，返回select的值，否则返回单元格文本

$（'#运行'）。单击（函数（）{
var table=$（“#学生”）.tableToJSON({
提取器：函数（$index，$cell）{
如果（$index==1）{
返回$cell.find（'select'）.val（）
}
返回$cell.text（）
}
});
log（JSON.stringify（table））；
});


名称
动物
年龄
等级
奥斯卡