۲ مطلب با کلمه‌ی کلیدی «آموزش طراحی جدول با استفاده از jQuery» ثبت شده است
طراحی یک جدول HTML
بسم الله الرحمن الرحیم
طبیعتا همه با طراحی یک جدول ساده HTML آشنایی دارید، مثلا جدول زیر را در نظر بگیرید:
<table >
<tr>
<th >
Title
</th>
<th >
Price
</th>
</tr>
<tr>
<td >
CSS
</td>
<td >
1,000,000
</td>
</tr>
<tr>
<td >
HTML
</td>
<td >
12,000,000
</td>
</tr>
</table>
خوب حالا فکر کنید می خواهید به سطرهای جدولتان استایلی بدهید، در زمان های گذشته شما می بایست یک استایل تعریف می کردید مثلا
<style>
.blueColor
{
color:blue;
}
</style>
بعد آن را به سلول های جدول خود یعنی td می دادید.
اما باز طبیعتا شما نیز از Selector های HTML استفاده می کنید مثل زیر
<html>
<head>
<style>
tr
{
color:blue;
}
</style>
</head>
<body>
<table >
<tr>
<th >
Title
</th>
<th >
Price
</th>
</tr>
<tr>
<td >
CSS
</td>
<td >
1,000,000
</td>
</tr>
<tr>
<td >
HTML
</td>
<td >
12,000,000
</td>
</tr>
</table>
</body>
خوب اگر بخواهید برای سطر و ستون های زوج فرد استایل تعریف کنید یک راه این است که به صورت گذشته آن را به سلول ها بدهید.
اما می توانید این کار را نیز با استفاده از jQuery انجام دهید یعنی فقط شما استایل خود را تعریف کنید و سپس با استفاده از jQuery استایل خود را به تمامی سلول ها بدهید.
وقتی دارید به صورت داینامیک جدول ایجاد می کنید و یا سطر و ستون های شما به صورت داینامیک از پایگاه داده شما خوانده و ایجاد می شوند، این دستور می تواند بسیار به شما کمک کند.
$(document).ready(function(){
$("tr:odd").css("background-color","yellow");
});
</script>
حال مثال ما به صورت زیر کامل می شود
<html>
<head>
<style>
.oddStyle
{
color:blue;
}
.evenStyle
{
color: red;
}
</style>
<script>
$(document).ready(function () {
$("tr:even").addClass("even");
$("tr:odd").addClass("oddStyle");
});
</script>
</head>
<body>
<table >
<tr>
<th >
Title
</th>
<th >
Price
</th>
</tr>
<tr>
<td >
CSS
</td>
<td >
1,000,000
</td>
</tr>
<tr>
<td >
HTML
</td>
<td >
12,000,000
</td>
</tr>
</table>
</body>
شاید راه های ساده به نظر پیش پا افتاده و مبتدی باشند اما رفع یک نیاز می تواند اختراع یک دکمه باشد، سعی کنید این مطالب کوچک و پیش پا افتاده را برای افزایش سرعت کد نویسی و حل مسائل همیشه دنبال کنید
موفق باشید
تعیین یک Button به عنوان DefaultButton در MVC
بسم الله الرحمن الرحیم
تعیین یک Button به عنوان DefaultButton در MVC
در MVC برای اینکه شما یک Button را به عنوان Button پیش فرض قرار دهید و در صورتی که کاربر دکمه Enter کیبورد را زد آن Button را فراخوانی کنید کافی است به صورت زیر عمل کنید.
<script type="text/javascript">
$(document).ready(function (){
$("#MyForm").keypress(function (e) {
kCode = e.keyCode || e.charCode /*for cross browser */
if (kCode == 13) { var defaultbtn = $(this).attr("DefaultButton");
$("#" + defaultbtn).click();
return false;
}
});
});
</script>
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { DefaultButton = "SubmitButton", id = "MyForm" }))
{
@Html.TextBox("txtname")
<span>Please Enter value and then press Enter Key</span><br />
<input type="submit" name="btnSubmit" id="SubmitButton" value="Submit" />
}