0

如何创建表并为每行创建 2 列，每列将包含变量 Time 中的复选框并将表分配给对象属性。

var Time 将具有以下示例形式的字符串：08:00 AM - 09:00 AM;09:00 AM - 10:00 AM;10:00 AM - 11:00 AM 09:30 AM - 10:30 AM ;上午 11:30 - 下午 12:30

如果变量 Time 字符串中有分号，那么它应该将字符串分成几部分，然后为每一部分创建一个复选框。

例如在“08:00 AM - 09:00 AM;09:00 AM - 10:00 AM;10:00 AM - 11:00 AM”的情况下，它应该创建一个包含 2 行和 2 列的表和第一行的第一列将显示“08:00 AM - 09:00 AM”，第二列显示“09:00 AM - 10:00 AM”，第二行将显示“10:00 AM - 11:00 AM” "在第一栏中，并在第二栏中注明。

换句话说，BookArray[i-1][2] 将保存一个包含行的不同表，每行将有 2 列，每列将有一个用于每条记录的复选框。

for(var i = 0; i < gAssessorsArray.length; i++) 
{                           
    var Time = gAssessorsArray[i].Time; 
    var CurrentTable;

    BookArray[i] = new Array();
    BookArray[i][0] = gAssessorsArray[i].ID;    
    BookArray[i][1] = '<input type="checkbox" id="bk_' + gAssessorsArray[i].ID + '" value="' + gAssessorsArray[i].Name + '" onchange="BookAppointment(this)" />';           
    BookArray[i][2] = CurrentTable;                                                     
}
4

2 回答 2

0

让我试一试：

我的设置

HTML

<div id="output"></div>

JavaScript

var gAssessorsArray = [];
gAssessorsArray[0] = {
    ID: 0,
    Name: 'Robert',
    Time: '12:00'
};
gAssessorsArray[1] = {
    ID: 1,
    Name: 'Chocolate',
    Time: '9:00;4:35;12:30 - 1:00;00:00'
};
gAssessorsArray[2] = {
    ID: 2,
    Name: 'Hot Chocolate',
    Time: '3:00;4:35;5:30'
};

解决方案[演示]

var table = "";
var checkboxes = "";
for (var i = 0; i < gAssessorsArray.length; i++) {
    var times = gAssessorsArray[i].Time.split(';');


    if (times.length < 3) {
        times[0] = times[1] == undefined ? '<td colspan="2"><input type="checkbox"/>' + times[0] + '</td>' : '<td><input type="checkbox"/>' + times[0] + '</td>'
        times[1] = times[1] == undefined ? '' : '<td><input type="checkbox"/>' + times[1] + '</td>';

        checkboxes = (times[1] != undefined && times[1].length > 1) ? '<input type="checkbox" />' : '';

        table = '<table><thead><tr><th colspan="2">' + gAssessorsArray[i].Name + '</th></tr></thead><tbody>';

        table += '<tr id="' + gAssessorsArray[i].ID + '">' + times[0] + times[1] + '</tr></tbody></table>';
    } else {
        if (times.length % 2 == 0) {
            for (var j = 0; j < times.length; j++) {
                times[j] = j % 2 == 0 ? '<tr><td><input type="checkbox"/>' + times[j] + '</td>' : '<td><input type="checkbox"/>' + times[j] + '</td></tr>';
            }
        } else {
            for (var j = 0; j < times.length; j++) {
                if (j == times.length - 1) {
                    times[times.length - 1] = '<tr><td colspan="2"><input type="checkbox"/>' + times[times.length - 1] + '</td></tr>';
                    continue;
                }
                times[j] = (j % 2 == 0) ? ('<tr><td><input type="checkbox"/>' + times[j] + '</td>') : ('<td><input type="checkbox"/>' + times[j] + '</td></tr>');

            }

        }

        table = '<table><thead><tr><th colspan="2">' + gAssessorsArray[i].Name + '</th></tr></thead><tbody>' + times.join("") + '</tbody></table>';
    }


    document.querySelector('#output').innerHTML += table;
}
于 2013-08-16T15:36:05.290 回答
0

我会用这样的东西：

for ( ... each "gAssessorsArray"
  var time = arrayItem.Time;
  var cells = someCodeThatSplitsTime(time); // each "cell" would be a string
                                            // representing the cell content
                                            // i.e. "08:00 - 09:00"
  var table = $("<table />");
  var row = $("<tr />"), col = 0;
  table.append(row);
  for ( ... each "cells"
     if (col == 2) {
       col = 0;
       row = $("<tr />");
       table.append(row);
     }
     var chk = $("<input type='checkbox />'");
     var span = $("<span />");
     span.text(cell); // 08:00 - 09:00
     var colEl = $("<td />");
     colEl.append(chk);
     colEl.append(span);
     row.append(colEl);
     col++;
  }

  arrayItem.Table = table

当然，假设您可以使用 jQuery。否则，您需要使用相应的 DOM 函数更改每个 $ 函数。

于 2013-08-16T14:53:11.953 回答