اضافه کردن یک سطر TR به جدول TBODY با استفاده از JQuery
یکشنبه 5 مهر 1394در این مقاله با یک مثال چگونگی اضافه کردن سطر TR به جدول TBODY را با استفاده از JQuery توضیح می دهیم. در اینجا یک آرایه JSON تکرار خواهد شد و سطر TR به صورت پویا به جدول TBODY اضافه می شود.
شکل زیر یک صفحه Html است که شامل دکمه (button) برای ایجاد جدول و یک DIV که در برگیرنده آن است، می باشد.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<style>
body {
direction: rtl;
}
</style>
<body>
<input type="button" id="btnGenerate" value="ایجاد جدول" />
<hr />
<div id="dvTable">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGenerate").click(function () {
//Build an array containing Customer records.
var customers = new Array();
customers.push(["شناسه مشتری", "نام", "کشور"]);
customers.push([1, "علی محمدی", "ایالات متحده آمریکا"]);
customers.push([2, "زهرا شریفی", "هند"]);
customers.push([3, "ساناز سلیمی", "فرانسه"]);
customers.push([4, "رضا احمدی", "روسیه"]);
//Create a HTML Table element.
var table = $("<table />");
table[0].border = "1";
//Get the count of columns.
var columnCount = customers[0].length;
//Add the header row.
var row = $(table[0].insertRow(-1));
for (var i = 0; i < columnCount; i++) {
var headerCell = $("<th />");
headerCell.html(customers[0][i]);
row.append(headerCell);
}
//Add the data rows.
for (var i = 1; i < customers.length; i++) {
row = $(table[0].insertRow(-1));
for (var j = 0; j < columnCount; j++) {
var cell = $("<td />");
cell.html(customers[i][j]);
row.append(cell);
}
}
var dvTable = $("#dvTable");
dvTable.html("");
dvTable.append(table);
});
});
</script>
</body>
</html>
توضیح روش: برای اضافه کردن سطر به جدول TBODY به صورت زیر عمل می شود.
آرایه ای از داده ها
در ابتدا یک آرایه ایجاد می شود که شامل مقادیر Header( سرتیتر) و سلولهای جدول می باشد. سپس المانهای جدول با استفاده از JQuery ایجاد می شوند.
اضافه کردن ردیف سرستون
ردیف سرستون با استفاده از عنصر اول آرایه ساخته خواهد شد که شامل مقادیر متن سرستون می باشد.
برای اولین بار یک ردیف به جدول وارد کرده و سپس با اجرای یک حلقه تعدادی ستون به صورت یک به یک ایجاد شده و به ردیف سرستون اضافه می شود.
متد وارد کردن ردیف سرستون: این متد یک سطر جدید در یک ایندکس مشخص به جدول اضافه می کند. اگر ایندکس با عدد 1- تعریف شود آنگاه ردیف به آخر جدول اضافه می شود.
اضافه کردن ردیف داده ها
برای این کار یک حلقه بر روی عناصر آرایه اجرا شده و سطرها یک به یک ایجاد می شوند. سپس با اضافه کردن کد JQuery، داخل هر سطر سلولهایی به صورت داینامیک ایجاد می شوند.
اضافه کردن جدول به صفحه
در نهایت جدول ایجاد شده با استفاده از DIV در برگیرنده کد JQuery به صفحه اضافه می شود.
- Jquery
- 3k بازدید
- 1 تشکر