【问题标题】:Drop down in HTML table and have selected value in table data in javascript在 HTML 表格中下拉并在 javascript 的表格数据中选择值
【发布时间】:2015-05-13 06:02:00
【问题描述】:

我在 html 表格中有下拉菜单

                <td contenteditable="true">
                                <select class="currentCulture form-control">

                             <option value="0" >1</option>
                             <option value="1" >2</option>
                            <option value="2" >3</option>

                                 </select>

                             </td>
                             <td contenteditable="true">Stir Fry</td>
                             <td contenteditable="true">stir-fry</td>
                             <td contenteditable="true">Stir Fry</td>

我通过ajax调用以json形式将HTML表格的全部数据返回到我的控制器

      var table = $('#datatable').tableToJSON();
        var datatosend = JSON.stringify(table)
            alert(JSON.stringify(table));
            $.ajax({
                type: "POST",
                url: '/SalesContracts/addd',
                data: datatosend,
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                success: function () {
                    alert('hii');
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });

得到类似的结果

   {[
     {

       "Brand": "1\n  2\n   3", 
        "Model": "Stir Fry",
        "Name": "stir-fry",
        "Quantity": "Stir Fry",
        "Unit": "stir-fry",
        "Price Cost": "Stir Fry",
        "SubTotal": "stir-fry",
         "": ""

} ]}

我收到了 select(Dropdown) "brand" 的所有三个选项,我只想在 Jsondata 中获取选定的选项。有什么可能的解决方案吗? .如果有人帮助我,我将不胜感激。谢谢。

TableTojson 方法

    (function(e){e.fn.tableToJSON=function(t){var n={ignoreColumns:[],onlyColumns:null,ignoreHiddenRows:!0,headings:null};t=e.extend(n,t);var r=function(e){return e!==undefined&&e!==null?!0:!1},i=function(n){return r(t.onlyColumns)?e.inArray(n,t.onlyColumns)===-1:e.inArray(n,t.ignoreColumns)!==-1},s=function(t,n){var r={};return e.each(n,function(e,n){e<t.length&&(r[t[e]]=n)}),r},o=function(t){var n=[];return e(t).children("td,th").each(function(t,s){if(!i(t)){var o=e(s).data("override"),u=e.trim(e(s).text());n[n.length]=r(o)?o:u}}),n},u=function(e){var n=e.find("tr:first").first();return r(t.headings)?t.headings:o(n)},a=function(n,i){var u=[];return n.children("tbody,*").children("tr").each(function(n,a){if(n!==0||r(t.headings))if(e(a).is(":visible")||!t.ignoreHiddenRows)u[u.length]=s(i,o(a))}),u},f=u(this);return a(this,f)}})(jQuery);

如果有另一种方法来获取具有选定下拉值的表格数据,请指导我。谢谢。

【问题讨论】:

  • 还有什么神奇的方法:tableToJSON?
  • 我有 js 库,用于将整个表数据转换为 json 形式。
  • 那不是你有问题的代码.....
  • 那么请您指导我找到更好的解决方案来获取带有下拉选定值的 json 中的 html 表格数据?
  • 您可以使用 jQuery 的 serialize() 方法来收集表单数据,但您的表格似乎也有您想要收集的常规文本。您究竟想在这里实现什么目标?

标签: javascript php ajax json html-table


【解决方案1】:

我不知道这是否会对您有所帮助,或者这可能不是优化的方法,但它会完成工作。 难道你不能删除未选择的选项并生成json。

我添加了一个临时 div 并克隆了表并添加到该表中

<div id="tempdiv" style="visibility:hidden">

$('#datatable').clone().appendTo($("#tempdiv"));
var tempTable=$("#tempdiv").children(0);
var sel = tempTable.find(".currentCulture");
$(sel).children().not("option:selected").remove();   

var table = (tempTable).tableToJSON();

【讨论】:

  • Ginish 我非常感谢你。我还有一个问题请告诉我如何使用 ajax 调用填充选择标签选项
  • $.ajax({ url: "/SalesContracts/get" , datatype: 'json' }) .done(function (data) { var jdata = JSON.parse(data); $.each (jdata, function (i, j) { $('#sel_data').append($("
猜你喜欢
  • 2020-03-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-03-09
  • 1970-01-01
  • 2016-11-10
  • 1970-01-01
相关资源
最近更新 更多