ID の列を左側に移したいのですがうまく行きません。

FirstName, LastNameのテーブルにAgeとIDのテーブルを加えています。
テーブルを加えるところまでは出来たのですがIDの列を左側に移すことができません。

<html>
	<head>
		<title>Untitled Page</title>
	</head>
	<body>
				<h1>The Seinfeld Family</h1>
				<table id="Seinfeld Family" bgcolor=#66ffc border="1" style="width:533px;">
					<tr  bgcolor=#ff0000><th>First Name</th><th>Last Name</th></tr>
					<tr><td>George</td><td>Constanza</td></tr>
					<tr><td>Jerry</td><td>Seinfeld</td></tr>
					<tr><td>Krammer</td><td>Cosmo</td></tr>
					<tr><td>Elaine</td><td>Benice</td></tr>
					<tr><td>Larry</td><td>King</td></tr>
					<tr><td>Bill</td><td>O'Reilly</td></tr>
				</table>
				
				<script type="text/javascript">
				var table=document.getElementById("Seinfeld Family");
				
				var index = 1;

				
				//code to add a new column to the Seinfeld Family table
				var tableBody=table.getElementsByTagName("TBODY");
				var tableRows=tableBody[0].getElementsByTagName("TR");
				var headerRow=tableRows[0];
				var headerColumns=headerRow.childNodes;
				
				alert("Adding column header...");
				var newColumn=document.createElement('TH');
				var newColumnText=document.createTextNode("Age");
                               newColumn.appendChild(newColumnText);
				headerRow.appendChild(newColumn);
				
		//Ageの列のテーブル
				var ageValues=["36","42","44","56","35","56"];
                
                
				for(var i=0; i<ageValues.length; i++){
				    var newRow=document.createElement('TD');
				    var newRow1=tableRows[i+1];
				    var newRowText=document.createTextNode(ageValues[i]);
				    newRow.appendChild(newRowText);
				    newRow1.appendChild(newRow);
				}
				
				
				
				
		//IDの列のテーブル (このIDの列を左側（FirstNameの左）に移したいのですがわかりません）
				alert("Adding ID column and values...");
				var newColumn = document.createElement('TH');
				var newColumnText = document.createTextNode("ID");
				newColumn.appendChild(newColumnText);
				headerRow.appendChild(newColumn);

				var idValues = ["1", "2", "3", "4", "5", "6"];

				for (var i = 0; i < idValues.length; i++) {
				    var newRow = document.createElement('TD');
				    var newRow1 = tableRows[i + 1];
				    var newRowText = document.createTextNode(idValues[i]);
				    newRow.appendChild(newRowText);
				    newRow1.appendChild(newRow);
				}
				
				</script>
	</body>
</html>

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

例えば、newRowに追加するところで例にすると
newRow.appendChild(newRowText)を行なうと、後ろに追加されるため、newRow.insertBefore(newRowText, newRow.firstChild);とすることで、先頭に挿入されます。
そのほかのところも同様にすればいいかと思います。

投稿2017/02/19 03:01