Artifact
5ac54a781e4e3d9ee05638db9d6c162491a52562da1a671a94bf1078668805e3:
0000: 3c 74 61 62 6c 65 2d 6d 75 6c 74 69 62 6f 64 79 <table-multibody
0010: 3e 0a 20 20 3c 68 33 3e 42 6f 64 69 65 73 3c 2f >. <h3>Bodies</
0020: 68 33 3e 0a 20 20 3c 74 61 62 6c 65 20 62 6f 72 h3>. <table bor
0030: 64 65 72 3d 31 3e 0a 20 20 20 20 3c 74 62 6f 64 der=1>. <tbod
0040: 79 20 65 61 63 68 3d 7b 20 62 6f 64 79 2c 20 69 y each={ body, i
0050: 20 69 6e 20 62 6f 64 69 65 73 20 7d 3e 0a 20 20 in bodies }>.
0060: 20 20 20 20 3c 74 72 20 73 74 79 6c 65 3d 22 62 <tr style="b
0070: 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a ackground-color:
0080: 7b 20 62 67 63 6f 6c 6f 72 5b 69 26 61 6d 70 3b { bgcolor[i&
0090: 31 5d 20 7d 22 3e 3c 74 64 20 65 61 63 68 3d 7b 1] }"><td each={
00a0: 20 62 6f 64 79 20 7d 3e 7b 20 62 6f 64 79 5b 69 body }>{ body[i
00b0: 5d 20 7d 3c 2f 74 64 3e 3c 2f 74 72 3e 0a 20 20 ] }</td></tr>.
00c0: 20 20 3c 2f 74 62 6f 64 79 3e 0a 20 20 3c 2f 74 </tbody>. </t
00d0: 61 62 6c 65 3e 0a 20 20 3c 62 75 74 74 6f 6e 20 able>. <button
00e0: 6f 6e 63 6c 69 63 6b 3d 7b 20 73 77 61 70 43 6f onclick={ swapCo
00f0: 6c 6f 72 20 7d 3e 53 77 61 70 20 63 6f 6c 6f 72 lor }>Swap color
0100: 3c 2f 62 75 74 74 6f 6e 3e 0a 0a 20 20 74 68 69 </button>.. thi
0110: 73 2e 62 6f 64 69 65 73 20 3d 20 5b 5b 27 41 31 s.bodies = [['A1
0120: 27 2c 20 27 41 32 27 2c 20 27 41 33 27 5d 2c 20 ', 'A2', 'A3'],
0130: 5b 27 42 31 27 2c 20 27 42 32 27 2c 20 27 42 33 ['B1', 'B2', 'B3
0140: 27 5d 2c 20 5b 27 43 31 27 2c 20 27 43 32 27 2c '], ['C1', 'C2',
0150: 20 27 43 33 27 5d 5d 0a 20 20 74 68 69 73 2e 62 'C3']]. this.b
0160: 67 63 6f 6c 6f 72 20 3d 20 5b 20 27 77 68 69 74 gcolor = [ 'whit
0170: 65 27 2c 20 27 6c 69 6d 65 27 20 5d 0a 20 20 73 e', 'lime' ]. s
0180: 77 61 70 43 6f 6c 6f 72 28 69 29 20 7b 0a 20 20 wapColor(i) {.
0190: 20 20 74 68 69 73 2e 62 67 63 6f 6c 6f 72 2e 72 this.bgcolor.r
01a0: 65 76 65 72 73 65 28 29 0a 20 20 7d 0a 3c 2f 74 everse(). }.</t
01b0: 61 62 6c 65 2d 6d 75 6c 74 69 62 6f 64 79 3e 0a able-multibody>.