�@��O�͂ł̓f�[�^����͂��\�����܂��B�܂��A��y�Ɉ�����^�u���e�L�X�g�t�@�C�����y�[�W�ɕ\�����Ă݂܂��傤�B
�^�u���e�L�X�g�̓f�[�^�ƃf�[�^�̊Ԃ��^�u�R�[�h�iASC�R�[�h9�ԁj�ŋ���Ă��܂��B���̌`���̃f�[�^�̓e�L�X�g�G�f�B�^�ł��쐬�ł��܂����AExcel�Ȃǂ̃f�[�^�x�[�X�\�t�g�ł��o�͂��邱�Ƃ��ł��܂��B�����ł�Excel�ō쐬�����f�[�^ (
sample.xls) ��UTF-8 (BOM [Byte Order Mark]�t��) �ɕ����R�[�h��ϊ������t�@�C�� (
sample.txt) ���g�p���܂��B���s�R�[�h��LF (Line Feed : ASC�R�[�h10��)�ɂ��Ă���܂��B
�@�܂��A�]���ʂ�f�[�^���T�[�o�[����ǂݍ��݂܂��B�e�L�X�g�f�[�^�Ȃ̂�responseText�Ńf�[�^�����܂��B���̓ǂݍ��f�[�^�����s�R�[�h (LF) �ōs�P�ʂɕ����܂��B������O�ɉ��s�R�[�h��ϐ��ɓ���Ă����Ɗy�ɂȂ�܂��B����͈ȉ��̂悤�Ɏw�肵�܂��B
var LF = String.fromCharCode(10);
�@�s�P�ʂɂ���ɂ�split()���g���܂��Bsplit()���g���Ή��s�R�[�h�P�ʂŕ������ꂽ���ʂ��z��Ƃ��ĕԂ���܂��B�ȉ��̂悤�ɂ���ƍs�P�ʂɕ�������z��ϐ��Ƃ���lineData�Ɋi�[����܂��B
lineData = tabText.split(LF);
�s�P�ʂɕ����ł����玟�Ƀ^�u�R�[�h�Ńf�[�^��蕪���܂��B�܂��A�^�u�R�[�h��ϐ��ɓ���Ă����܂��B����͈ȉ��̂悤�ɂȂ�܂��B
var TAB = String.fromCharCode(9);
�@�f�[�^�P�ʂɕ�������ɂ́A��͂�split()���g���Ĉȉ��̂悤�ɂ��܂��B
wCount = lineData[i].split(TAB);
�@����ŕϐ�wCount�Ƀf�[�^���z��Ƃ��Ċi�[����܂��B���Ƃ́A�f�[�^�̐������J��Ԃ��^�u���e�L�X�g�̓��e��\�����邱�Ƃ��ł��܂��B���ۂ̃T���v���͈ȉ��̂悤�ɂȂ�܂��B�i�T���v����
���s�����j
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>�^�u���e�L�X�g��\������</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function loadDataFile(fName)
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET",fName,true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = parseTabText(httpObj.responseText);
}else{
$("result").innerHTML = "<b>Loading...</b>";
}
}
// �^�u���e�L�X�g����͂��ĕ\��
function parseTabText(tabText)
{
var resultText = "<table border='1' cellspacing='0'>";
var LF = String.fromCharCode(10); // ���s�R�[�h (LF)
var TAB = String.fromCharCode(9); // �^�u�R�[�h
lineData = tabText.split(LF);
for (var i=0; i<lineData.length; i++)
{
wCount = lineData[i].split(TAB);
resultText += "<tr>";
for (j=0; j<wCount.length; j++)
{
tData = wCount[j]; // �f�[�^
resultText += "<td>"+tData + "</td>";
}
resultText += "</tr>";
}
resultText += "</table>";
return resultText;
}
// --></script>
</head>
<body>
<h1>�^�u���e�L�X�g��\������</h1>
<p>�^�u���e�L�X�g��ǂݍ��ݕ\�����܂�</p>
<form name="ajaxForm">
<input type="button" value="sample.txt�t�@�C����ǂݍ���" onClick="loadDataFile('sample.txt')"><br>
</form>
<div id="result"></div>
</body>
</html>
�@�^�u���e�L�X�g�̏����͊ȒP�ł����A��L�̂悤�ȃX�N���v�g�̏ꍇ�A�v���O�����ƃf�[�^����������Ă��Ȃ����ߌ�X�A���ɂȂ邱�Ƃ�����܂��B���̖��Ƃ����̂́A�\������ۂ̉�����w�i�F�Ȃǂ�ύX����ۂɔ������܂��B���C�A�E�g�f�U�C���̓f�U�C�i�[���s���͂��ł����A���̏C����Ƃ̓v���O���}�łȂ��Ƃł��Ȃ��Ƃ������ƂɂȂ�܂��B�t�Ƀv���O���}�͏o�͂��錋�ʁ����C�A�E�g�f�U�C����m��Ȃ���Ȃ�܂���B�܂�A���݂ɑ傫���ˑ����Ă��܂����ƂɂȂ�܂��B��ɎГ��ŋ�����Ƃł���Ζ����y������邩������܂��A�f�U�C�i�[���ς������v���O���}�����H�����肵�Ă��܂��ƍ��������ƂɂȂ�܂��B�܂�A�Ȃ�ׂ��f�[�^�ƃf�U�C���͕�������Ă����̂���X�̂��߂ɂ͍D�܂����Ƃ������Ƃł��B
�@�����A�����I�ɂ�Ajax�ł̓u���E�U�ˑ��̕������傫���A���܂������Ȃ���������܂��B�Ƃ肠�������������d�v�ł����A�ꉞ��X�̂��Ƃ��l�����ăv���O�������쐬���Ă����Ɨǂ��ł��傤�B
�@�ł́A��L�̃v���O�������Ȃ�ׂ��f�U�C���Ɉˑ����Ȃ��悤�ɏ��������Ă݂܂��傤�B�܂��A�y�[�W���ɏo�͂���e�[�u���̃^�O�Ȃǂ��L�q���Ă����܂��B�K�v�ɉ����ăX�^�C���V�[�g�Ŕw�i�F�╶���T�C�Y�Ȃǂ��w�肵�܂��i�ȉ��̃T���v���ł̓X�^�C���V�[�g�͎g���Ă��܂���j�B
�@�܂��AHTML�^�O�ŕ������C�A�E�g�i�\���j�����߂Ă����܂��B�����ł̓e�[�u���^�O��<tr>�`<tr>�ň͂܂ꂽ���������ė��p���邱�Ƃɂ��܂��B�e�[�u���^�O����tr�^�O�ň͂܂ꂽ�͈͂���s�ɂȂ�܂����A���̈�s���������邽�߂�id���w�肵�Ă����܂��B����tr�^�O���ȉ��̂悤��getElementById()���g���Ďw�肵�܂��B
var listSourceObj = document.getElementById("priceList");
���̈�s�̃f�[�^������ɂ�cloneNode()���g���܂��B�����i�p�����[�^�j��true�܂���false�ɂȂ�܂��Btrue���w�肷��Ɠ�����q�v�f����������܂��Btd�^�O����������̂ňȉ��̂悤��true���w�肷��ƈ�s�����邱�Ƃ��ł��܂��B
listSourceObj.cloneNode(true);
�@���������ID�܂ŕ�������Ă��܂��܂��BID���d������ƃv���O�������琳��ɃA�N�Z�X�ł��Ȃ��Ȃ��Ă��܂��̂ňȉ��̂悤��id�v���p�e�B�ɕʂ�ID��ݒ肵�܂��B
trObj.id = "priceList"+i;
�@����ōs���������ꏀ�����ł��܂����B���Ƃ�td�^�O���Ƀf�[�^��\�����邾���ł��Btr�^�O���ɂ���td�^�O���Q�Ƃ���ɂ�getElementsByTagName()�𗘗p���܂��B�����td�^�O�ւ̎Q�Ƃ��z��ϐ��Ƃ��ĕԂ���܂��B����͈ȉ��̂悤�ɂȂ�܂��B
tdObj = trObj.getElementsByTagName("td");
���Ƃ�innerHTML�v���p�e�B�ɕ\������f�[�^��ݒ肵�܂��BinnerText�ł�Safari��Opera�ł̓f�[�^���\������܂���Firefox�ł͕\������܂���B���ۂ̃v���O�����͈ȉ��̂悤�ɂȂ�܂��B�������AInternet Explorer 6�ł͓��e���\������܂���i�T���v����
���s�����BinnerText���g�����T���v��(Firefox�ł͓����Ȃ��BinnerText��textContent�ɕύX�����Firefox�ł����삷��j��
���s�����j
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>�^�u���e�L�X�g��\������2</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function loadDataFile(fName)
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET",fName,true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
parseTabText(httpObj.responseText);
}
if ((httpObj.readyState == 4) && (httpObj.status == 404))
{
alert("Error!");
}
}
// �^�u���e�L�X�g����͂��ĕ\��
function parseTabText(tabText)
{
// ���i�R�[�h�Ɩ��O�A���i��\��������s�̃^�OID���擾
var listSourceObj = document.getElementById("priceList");
var listTableObj = document.getElementById("priceTable");
var LF = String.fromCharCode(10); // ���s�R�[�h (LF)
var TAB = String.fromCharCode(9); // �^�u�R�[�h
lineData = tabText.split(LF);
for (var i=0; i<lineData.length; i++)
{
wCount = lineData[i].split(TAB);
trObj = listSourceObj.cloneNode(true);
trObj.id = "priceList"+i;
tdObj = trObj.getElementsByTagName("td");
for (j=0; j<wCount.length; j++)
{
tData = wCount[j]; // �f�[�^
tdObj[j].innerHTML = tData;
}
listTableObj.appendChild(trObj);
}
}
// --></script>
</head>
<body>
<h1>�^�u���e�L�X�g��\������2</h1>
<p>�^�u���e�L�X�g��ǂݍ��ݕ\�����܂�</p>
<form name="ajaxForm">
<input type="button" value="sample.txt�t�@�C����ǂݍ���" onClick="loadDataFile('sample.txt')"><br>
</form>
<table id="priceTable" border="1">
<tr id="priceList"><td>�R�[�h</td><td>���i��</td><td>���i</td></tr>
</table>
</body>
</html>
�@��L�T���v����Internet Explorer 6�ł͓��삵�Ȃ��̂ŁAInternet Explorer 6�̏ꍇ�ɂ�div, span�^�O�𗘗p���邩�Atbody�^�O��id���w�肵���T���v���ɕύX����K�v������܂��B�ȉ������ۂ̃T���v���ɂȂ�܂��B�Ȃ��A�ύX�_�͐ԐF�Ŏw�肵�Ă���܂��B�܂��A�X�^�C���V�[�g�Ń��C�A�E�g���w�肵�Ă��܂��B�idiv, span�̃T���v����
���s�����Atbody��id���w�肵���ꍇ�̃T���v����
���s�����j
��div, span�^�O�𗘗p�����ꍇ�̃X�N���v�g
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>�^�u���e�L�X�g��\������(IE)</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function loadDataFile(fName)
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET",fName,true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
parseTabText(httpObj.responseText);
}
if ((httpObj.readyState == 4) && (httpObj.status == 404))
{
alert("Error!");
}
}
// �^�u���e�L�X�g����͂��ĕ\��
function parseTabText(tabText)
{
// ���i�R�[�h�Ɩ��O�A���i��\��������s�̃^�OID���擾
var listSourceObj = document.getElementById("priceList");
var listTableObj = document.getElementById("priceTable");
var LF = String.fromCharCode(10); // ���s�R�[�h (LF)
var TAB = String.fromCharCode(9); // �^�u�R�[�h
lineData = tabText.split(LF);
for (var i=0; i<lineData.length; i++)
{
wCount = lineData[i].split(TAB);
trObj = listSourceObj.cloneNode(true);
trObj.id = "priceList"+i;
tdObj = trObj.getElementsByTagName("span");
for (j=0; j<wCount.length; j++)
{
tData = wCount[j]; // �f�[�^
tdObj[j].innerHTML = tData;
}
listTableObj.appendChild(trObj);
}
}
// --></script>
</head>
<body>
<h1>�^�u���e�L�X�g��\������(IE)</h1>
<p>�^�u���e�L�X�g��ǂݍ��ݕ\�����܂�</p>
<form name="ajaxForm">
<input type="button" value="sample.txt�t�@�C����ǂݍ���" onClick="loadDataFile('sample.txt')"><br>
</form>
<div id="priceTable">
<div id="priceList">
<span class="itemCode"></span><span class="itemName"></span><span class="itemPrice"></span>
</div>
</div>
</body>
</html>
��tbody��id���w�肵���ꍇ�̃T���v��
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>�^�u���e�L�X�g��\������(IE6)</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function loadDataFile(fName)
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET",fName,true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
parseTabText(httpObj.responseText);
}
if ((httpObj.readyState == 4) && (httpObj.status == 404))
{
alert("Error!");
}
}
// �^�u���e�L�X�g����͂��ĕ\��
function parseTabText(tabText)
{
// ���i�R�[�h�Ɩ��O�A���i��\��������s�̃^�OID���擾
var listSourceObj = document.getElementById("priceList");
var listTableObj = document.getElementById("priceTable");
var LF = String.fromCharCode(10); // ���s�R�[�h (LF)
var TAB = String.fromCharCode(9); // �^�u�R�[�h
lineData = tabText.split(LF);
for (var i=0; i<lineData.length; i++)
{
wCount = lineData[i].split(TAB);
trObj = listSourceObj.cloneNode(true);
trObj.id = "priceList"+i;
tdObj = trObj.getElementsByTagName("td");
for (j=0; j<wCount.length; j++)
{
tData = wCount[j]; // �f�[�^
tdObj[j].innerHTML = tData;
}
listTableObj.appendChild(trObj);
}
}
// --></script>
</head>
<body>
<h1>�^�u���e�L�X�g��\������(IE6)</h1>
<p>�^�u���e�L�X�g��ǂݍ��ݕ\�����܂�</p>
<form name="ajaxForm">
<input type="button" value="sample.txt�t�@�C����ǂݍ���" onClick="loadDataFile('sample.txt')"><br>
</form>
<table border="1">
<tbody id="priceTable" border="1">
<tr id="priceList"><td>�R�[�h</td><td>���i��</td><td>���i</td></tr>
</tbody>
</table>
</body>
</html>
�@���̂悤�Ȏ�@�ȊO�ɁA���C�A�E�g���ɂǂ̃f�[�^��\�����邩���w�肵�Ă������̂�����܂��B
�@�����ł�CSV�`���̃f�[�^��ǂݍ���ŕ\�������Ă݂܂��B
[
��O�́@2:CSV�f�[�^��\��������]
[
�ڎ���]
(2006.1.1, 2006.1.11�lj��C��, 2006.2.24�lj��C��)