Question

如何创建表并为每行创建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 AM - 12:30 PM

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

例如，在＆＃34; 08：00 AM - 09:00 AM; 09:00 AM - 10:00 AM; 10:00 AM - 11:00 AM＆＃34;然后它应该创建一个包含2行和2列的表，第一行将在第一列中显示“08:00 AM - 09:00 AM”，在第二列中显示“09:00 AM - 10:00 AM”行将“上午10:00 - 上午11:00和＃34;在第一列中，并在第二列中注明。

换句话说，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;                                                     
}

Answer 1

我会选择这样的东西：

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函数更改每个$函数。

Answer 2

让我试一试：

我的设置

<强> 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'
};

解决方案[Demo]

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;
}

如何创建表并动态为每行创建2列

2 个答案:

我的设置

解决方案[Demo]