Question

问题：我试图修改我在JS（jQuery）中的函数内创建的HTML表，循环遍历行和列并使用.html（）设置值。

代码：

所以我有我在JS中创建的html元素

var html = $("<table id='table_art'><tbody><tr><th></th><th>2013-01-01</th><th>2013-02-01</th></tr><tr><th>DATA123</th><td>2,2</td><td>3,2</td></tr><tr></tbody></table>");

然后我用来填充表的数据

var data = {
  "fechas": ["2013-01-01", "2013-02-01"],
  "dataval": {
    "2013-01-01": {
      "DATA123": 98.93
    },
    "2013-02-01": {
      "DATA123": 98.12
    }
  },
  "names": ["DATA123"]
};

我遍历数据，获得所需的值并将其设置在应该设置的位置。我这样做是通过使用选择器在表格中选择所需的位置。

var fechas = data.fechas;
var nombres = data.names;

var val = "";
var posR = 0;
var posC = 0;

for (var i = 0; i < fechas.length; i++) {

   for (var j = 0; j < nombres.length; j++) {

        $("#table_art > tbody > tr").eq(j + 1).children("td").eq(i).html(val);
            }
    }

我将html作为字符串，只是为了检查我的值是否已更新，只是发现它们没有。

console.log(html.html());

JSFiddle

期望的结果：

用表或只是tbody包裹，只要我正确填充行和列，它就不重要了

 <table id="table_art">
    <tbody>
        <tr>
            <th></th>
            <th>2013-01-01</th>
            <th>2013-02-01</th>
        </tr>
        <tr>
            <th>DATA123</th>
            <td>98.93</td>
            <td>98.12</td>
        </tr>
    </tbody>
</table>

Answer 1

var dates = data.fechas;
var names = data.names;

var table = $("<table>");

// Create row from data array, each index is one cell
// if isTop is true, all cells will be created as headers (th)
var createRow = function(data, isTop) {
    var row = $("<tr>");
    for(var i = 0; i < data.length; i++) {
        var cell = $( isTop === true || i === 0 ? "<th>" : "<td>");
        cell.text(data[i]);
        row.append(cell);
    }

    return row;
}

// Create temporary array with blank value and dates values
// and then create a header row
var tempDates = [""];
Array.prototype.push.apply(tempDates, dates)
table.append( createRow(tempDates, true) );

// Create data rows
for(var i = 0; i < names.length; i++) {
        var rowData = [names[i]];
    for(var j = 0; j < dates.length; j++ )
       rowData.push(data.dataval[dates[j]][names[i]]);

    table.append( createRow(rowData));
}

$("body").append(table);

Here is jsFiddle

Answer 2

此处查看此jsfiddle

这是您的代码出了什么问题：

甚至没有创建表来填充.....通过创建
<body>标记并在其中插入提供的html问题是解决了。
变量html应该只是一个包含的字符串您不想要的html $("<table etc...>");

Answer 3

不确定为什么要使用内循环。您的要求非常简单，可以使用map和filter函数：

来实现

首先获取将fechas映射到dataval

中的值的对象

类似

var fechas = data.fechas;
var dataval = data.dataval;


feacha_seperate = fechas.map(function(val) {dataval[val].fechas = val;
return dataval[val]
})

然后，您可以使用map函数将任何html标记应用于数据：类似于：

var html = $("<table class='table table-bordered' id='tabla_servicios' style='width:100%; padding:12px'><tbody><tr><th></th><th>2013-01-01</th><th>2013-02-01</th><th>2013-03-01</th><th>2013-04-01</th><th>2013-05-01</th><th>2013-06-01</th><th>2013-07-01</th><th>2013-08-01</th></tr><tr><th>INICIA.ADIF.ES</th><td>2,2</td><td>3,2</td><td>4,2</td><td>5,2</td><td>6,2</td><td>7,2</td><td>8,2</td><td>9,2</td></tr><tr><th>SALIDA INTERNET</th><td>2,3</td><td>3,3</td><td>4,3</td><td>5,3</td><td>6,3</td><td>7,3</td><td>8,3</td><td>9,3</td></tr><tr><th>SALIDA INTRANET</th><td>2,4</td><td>3,4</td><td>4,4</td><td>5,4</td><td>6,4</td><td>7,4</td><td>8,4</td><td>9,4</td></tr><tr><th>SERVICIO DE CORREO</th><td>2,5</td><td>3,5</td><td>4,5</td><td>5,5</td><td>6,5</td><td>7,5</td><td>8,5</td><td>9,5</td></tr><tr><th>WWW.ADIF.ES</th><td>2,6</td><td>3,6</td><td>4,6</td><td>5,6</td><td>6,6</td><td>7,6</td><td>8,6</td><td>9,6</td></tr></tbody></table>");

var data = {"fechas":["2013-01-01","2013-02-01","2013-03-01","2013-04-01","2013-05-01","2013-06-01","2013-07-01","2013-08-01"],"dataval":{"2013-06-01":{"SALIDA INTERNET":100,"INICIA.ADIF.ES":98.58,"WWW.ADIF.ES":100,"SALIDA INTRANET":99.2,"SERVICIO DE CORREO":98.9},"2013-05-01":{"SALIDA INTERNET":100,"INICIA.ADIF.ES":96.72,"WWW.ADIF.ES":99.9,"SALIDA INTRANET":99.76,"SERVICIO DE CORREO":99.91},"2013-03-01":{"SALIDA INTERNET":100,"INICIA.ADIF.ES":97.07,"WWW.ADIF.ES":99.99,"SALIDA INTRANET":99.9,"SERVICIO DE CORREO":99.87},"2013-07-01":{"SALIDA INTERNET":100,"INICIA.ADIF.ES":99.48,"WWW.ADIF.ES":99.88,"SALIDA INTRANET":99.87,"SERVICIO DE CORREO":99.74},"2013-01-01":{"SALIDA INTERNET":100,"INICIA.ADIF.ES":98.93,"WWW.ADIF.ES":99.3,"SALIDA INTRANET":98.82,"SERVICIO DE CORREO":100},"2013-04-01":{"SALIDA INTERNET":100,"INICIA.ADIF.ES":96.65,"WWW.ADIF.ES":99.83,"SALIDA INTRANET":99.3,"SERVICIO DE CORREO":99.98},"2013-02-01":{"SALIDA INTERNET":100,"INICIA.ADIF.ES":98.12,"WWW.ADIF.ES":99.95,"SALIDA INTRANET":99.75,"SERVICIO DE CORREO":100},"2013-08-01":{"SALIDA INTERNET":100,"INICIA.ADIF.ES":99.43,"WWW.ADIF.ES":100,"SALIDA INTRANET":99.9,"SERVICIO DE CORREO":100}},"names":["INICIA.ADIF.ES","SALIDA INTERNET","SALIDA INTRANET","SERVICIO DE CORREO","WWW.ADIF.ES"]};

var fechas = data.fechas;
var dataval = data.dataval;


feacha_seperate = fechas.map(function(val) {dataval[val].fechas = val;
return dataval[val]
})

fechas_th = feacha_seperate.map(function(val) {
return '<th>'+val.fechas+'</th>'
})

INICIA_ADIF_ES_td = feacha_seperate.map(function(val) {
return '<td>'+val['INICIA.ADIF.ES']+'</td>'
})

SALIDA_INTERNET_td = feacha_seperate.map(function(val) {
return '<td>'+val['SALIDA INTERNET']+'</td>'
})

SALIDA_INTRANET_td = feacha_seperate.map(function(val) {
return '<td>'+val['SALIDA INTRANET']+'</td>'
})

SERVICIO_DE_CORREO_td = feacha_seperate.map(function(val) {
return '<td>'+val['SERVICIO DE CORREO']+'</td>'
})

WWW_ADIF_ES_td = feacha_seperate.map(function(val) {
return '<td>'+val['WWW.ADIF.ES']+'</td>'
})

whole_html = '<tr><th></th>'+fechas_th+'</tr><tr>'+INICIA_ADIF_ES_td+'</tr><tr>'+SALIDA_INTERNET_td+'</tr><tr>'+SERVICIO_DE_CORREO_td+'</tr><tr>'+WWW_ADIF_ES_td+'</tr>'

console.log(whole_html);

P.S 上述方法可以进一步重构以满足您的需求

编辑，如果您的html依赖names数据属性，则可以执行以下操作：

var fechas = data.fechas;
var dataval = data.dataval;
var names = data.names;

feacha_seperate = fechas.map(function(val) {
return dataval[val]
})

//here the val refers to the names array if you want to change them to have custom names 
//create a separate array like var my_new_names=['test','test1'] in the exact order of the names array..
//then in the below code instead of `'<tr><th>'+val+'</th>'` do `'<tr><th>'+my_new_names[key]+'</th>'`
get_names_as_seperate_arrays= names.map(function(val,key) {
   return '<tr><th>'+val+'</th>'+feacha_seperate.map(function(val1) {
        return '<td>'+val1[val]+'</td>'
   })+'</tr>'
})

fechas_th = feacha_seperate.map(function(val) {
    return '<th>'+val.fechas+'</th>'
})
whole_html =  '<tr><th></th>'+fechas_th+'</tr>'+get_names_as_seperate_arrays.join('');
console.log(whole_html);

get_names_as_seperate_arrays会有td个数据，具体取决于names属性

在jQuery中递归地修改jQuery中创建的html元素

3 个答案: