راهی ساده تر برای افزودن یک سطر به جدول؟ [بایگانی]

ali_sed

سه شنبه 26 تیر 1386, 20:17 عصر

کد زیر در opera و firefox کار می کنه ولی در IE نه؟
البته بصورت ضمنی می نویسم چون کافی نت هستم و کد اصلی ندارم.

<html>
<head>
<script>
var rowtext='<tr><td>1</td><td>2</td><td>3</td></tr>';
function addrow(){
table1obj = document.getElementById('table1');
table1obj.innerHTML += rowtext;
}
</script>
</head>
<body>
<a href="javascript:addrow()">add row</a>
<table id="table1">
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
</table>
</body>
</html>

البته با استفاده از رفتار appendChild() در IE هم می شه این کارو کرد ولی ساختن یک شی سطر و اضافه کردن ستون ها به آن و ... طولانی می شه من این کارم کردم و در هر سه مرورگر جواب داد.اگه راه بهتری دارید خوشحال می شوم بنویسید.

ali_sed

پنج شنبه 28 تیر 1386, 11:44 صبح

خوب من به جوابم رسیدم ولی اینم برای شما...
البته سری به منبع بزنید مطالب جالب دیگری نیز پیدا می کنید.
با مطلب خوبی در سایت mredkj.com مواجه شدم، که برای استفاده بقیه دوستان خلاصه ای از آن را در زیر می نویسم
به نظر می رسه که استفاده از innerHTML راحت تر باشد. هرچند برای اضافه کردن یک سطر به جدول مورد نظر نیاز به استفاده از برخی رفتارهای DOM (Document Object Model) می باشد، به عبارت دیگر innerHTML کارایی لازم برای انجام این کار را ندارد. زمانی که می خواهید به عنوان مثال رشته <tr><td>my new row</td></tr> را به innerHTML یک جدول اضافه کنید، خواهید دید که در IE (Internet Explorer) کار نمی کند. یکی راه حل برای این مسئله استفاده از insertRow() و insertCell و سپس با استفاده از innerHTML محتویات سلول ها را تغییر دهیم.
روش دوم استفاده از DOM هست که طولانی ترین راه ممکنه می باشد، ولی بدلیل اینکه تمام اشیا بصورت مجزا از هم می باشند ایجاد تغییر در خط جدید بسیار دقیق تر خواهد بود.
و اما روش سوم استفاده از DOM Clone می باشد که ساده ترین روش برای ایجاد یک سطر جدید می باشد البته به شرطی که قصد تغییر محتویات سطر جدید را نداشته باشید.

Example 1: innerHTML
DOM table methods using innerHTML to fill in cells

JavaScript source
function addRowInnerHTML(tblId)
{
var tblBody = document.getElementById(tblId).tBodies[0];
var newRow = tblBody.insertRow(-1);
var newCell0 = newRow.insertCell(0);
newCell0.innerHTML = '<input type="input" value="cell 0 - text box" style="color: blue;" />';
var newCell1 = newRow.insertCell(1);
newCell1.innerHTML = 'cell 1 - just plain text';
}

Example 2: DOM
DOM table methods using DOM to fill in cells

JavaScript source
function addRowDOM(tblId)
{
var tblBody = document.getElementById(tblId).tBodies[0];
var newRow = tblBody.insertRow(-1);
var newCell0 = newRow.insertCell(0);
var newInput = document.createElement('input');
newInput.type = 'text';
newInput.value = 'cell 0 - text box';
newInput.style.color = 'blue';
newCell0.appendChild(newInput);
var newCell1 = newRow.insertCell(1);
newCell1.appendChild(document.createTextNode('cell 1 - just plain text'));
}

Example 3: DOM Clone
cloneNode to clone an existing row

JavaScript source
function addRowClone(tblId)
{
var tblBody = document.getElementById(tblId).tBodies[0];
var newNode = tblBody.rows[0].cloneNode(true);
tblBody.appendChild(newNode);
}

اینم جدول مربوطه که باید در صفحه وب قرار دهید بعلاوه 3 تا لینک برای فراخوانی توابع که در بالا ذکر شدند.

<a href="javascript:addRowInnerHTML('tblId')">add row innerHTML</a><br />
<a href="javascript:addRowDOM('tblId')">add row DOM</a><br />
<a href="javascript:addRowClone('tblId')">add row Clone</a><br />
<TABLE id="tblId" border="1">
<THEAD>
<TR>
<TH colSpan=2>tblInnerHTML header</TH></TR>
</THEAD>
<TBODY></TBODY>
</TABLE>

البته می تونید فایلی که آپلود کردم هم دانلود و استفاده کنید.