0

テーブルを作成し、各行に 2 つの列を作成するにはどうすればよいですか。各列は、変数 Time のチェックボックスを保持し、テーブルをオブジェクト プロパティに割り当てます。

var Time には、次の例の形式の文字列が含まれます。 ; 午前 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」、2 番目の列は「09:00 AM - 10:00 AM」、2 行目は「10:00 AM - 11:00 AM」となります。最初の列に "、2 番目の列に注記があります。

つまり、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 に答える