将数据从HTML转换为Javascript(jQuery）

Getting data from HTML into Javascript (jQuery)

本文关键字：Javascript jQuery 转换 数据 HTML      更新时间：2024-03-31

我正在使用jsGrid显示数据库中的数据。我想避免大量的复制粘贴代码，并希望为每个具有特定id的<div>创建一个网格，并在可能的情况下传递一些其他相应的值。

我想最好通过给出以下代码示例来说明我想要实现的目标：

function gridfunction(){
   $("#jsgrididvalue").jsGrid({
       var one = new Array ('red', 'green', 'brown');
       var two = new Array ('car', 'bus');
       var variable = "good";
       //the grid jscode is omitted here
   })
   $("#jsgrididvaluetwo").jsGrid({
       var one = new Array ('red', 'green', 'brown');
       var two = new Array ('orange', 'yellow', 'blue');
       var variable = "bad";
       //the grid jscode is omitted again
   })
}

现在，我不知道这是否可能，但我希望添加类似的东西

<div id="jsgrididvalue" arrayone="red, green, brown" arraytwo="car, bus" something="good"></div>
<div id="jsgrididvaluetwo" arrayone="orange, yellow, blue" arraytwo="train, plane" something="bad"></div>

而不仅仅是

<div id="jsgrididvalue"></div>
<div id="jsgrididvaluetwo"></div>

会帮助我达到我想要的目标。我正在尝试getElementbyID和其他一些东西，但什么都做不到。如果有人能给我指明正确的方向，或者告诉我这样的事情是否可能，我将不胜感激。不用说，我才刚刚开始学习javascript。

我可以通过以下方式改进NOBrien的回答：

<div class="jsGridItem" id="jsgrididvalue" data-arrayone="red,green,brown" data-arraytwo="car,bus" data-something="good"></div>
<div class="jsGridItem" id="jsgrididvaluetwo" data-arrayone="orange,yellow,blue" data-arraytwo="train,plane" data-something="bad"></div>`

然后，您可以调用包含该类的每个元素：

function gridfunction(){
    $(".jsGridItem").each(function(){
       var one = $(this).data('arrayone').split(',');
       var two = $(this).data('arraytwo').split(',');
       var variable = $(this).data('something');
       $(this).jsGrid({
           fields: []//use your data 
       });
       //the grid jscode is omitted here
   })
}

html:

<div id="jsgrididvalue" arrayone="red,green,brown" arraytwo="car,bus" something="good"></div>
<div id="jsgrididvaluetwo" arrayone="orange,yellow,blue" arraytwo="train,plane" something="bad"></div>

您需要替换arrayone属性值高于

的空格javascript:

function gridfunction(){
   $("#jsgrididvalue").jsGrid({
       var one = $(this).attr("arrayone").split(",");
       var two = $(this).attr("arrayone").split(",");
       var variable = $(this).attr("something");
       //the grid jscode is omitted here
   })
   $("#jsgrididvaluetwo").jsGrid({
       var one = $(this).attr("arrayone").split(",");
       var two = $(this).attr("arrayone").split(",");
       var variable = $(this).attr("something");
       //the grid jscode is omitted again
   })
}

将自定义属性作为数据元素添加到div中（删除数组列表中的空格）

<div class="jsGridItem" id="jsgrididvalue" data-arrayone="red,green,brown" data-arraytwo="car,bus" data-something="good"></div>
<div class="jsGridItem" id="jsgrididvaluetwo" data-arrayone="orange,yellow,blue" data-arraytwo="train,plane" data-something="bad"></div>`

以及两者的共同类。然后你可以同时浏览这两个：

function gridfunction(){
    $(".jsGridItem").jsGrid({
       var one = $(this).data('arrayone').split(',');
       var two = $(this).data('arraytwo').split(',');
       var variable = $(this).data('something');
       //the grid jscode is omitted here
   })
}
相关文章：