dom-modif.js

$(function(){                            // Data-binding function
  $.getJSON('a42580.json',function(d){   // Get details from the JSON file
    $('#movie').text(d.title);
    $('#screen').text(d.screen);
    $('#rating').text(d.rating);
    $('#runtime').text(d.runtime);
    $('#date').text(d.date);


    var t = $('<table/>').appendTo('#theatre');

    for(var i=0;i<d.rowLabels.length;i++){
      // Create a table row
      var tr = $('<tr/>')
        .append($('<th/>',{text:d.rowLabels[i]}))
        .appendTo(t);


	for(var j=0;j<d.tmap[0].length;j++){               //0 for i
      var u0 = d.umap[i].charAt(j);
      var t0 = d.tmap[i].charAt(j);
      var td = $('<td/>');


      if (u0==='O') {
        td.addClass('available');

      } else if (u0==='X') {
        td.addClass('reserved');

      } else if (u0==='M') {
        td.addClass('selected');
      };

      if (t0==='L') {
        td.addClass('left-sofa');

      } else if (t0==='R') {
        td.addClass('right-sofa');

      } else if (t0==='A') {
        td.addClass('armchair');
      };


        td.text(u0);
     	tr.append(td);
// 	for(var m=0;m<d.tmap[i].length;m++){
//       // Now deal with the second seat in the row
//       var u1 = d.umap[i].charAt(m);
//       var t1 = d.tmap[i].charAt(m);
//       var td1 = $('<td/>');
//       if (t1==='O')
//         td1.addClass('Available');
//       if (t1==='X')
//         td1.addClass('Reserved');
//       if (t1==='M')
//         td1.addClass('Selected');
//       td1.text(u1);
//       tr.append(td1);
// }
}
}

    // All of the seats are in place
    // Now define the action to be taken when the user clicks on
    // a seat
    $('td').click(function(){
      if ($(this).text()==='X')
        alert('That seat is taken already');
    });
		$('td').click(function(){
		//Can I book this seat?
		if ($(this).text()==='O'){
		$(this).text('M');
	}else{
	if ($(this).text()==='M'){
		$(this).text('O');
	}
	}
	});
  })
});