• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
Bold کردن نوشته های یک ردیف بعد از کلیک بر روی دکمه رادیویی قرارگرفته در آن
#1
سلام.
من یه جدول دارم که در هر ردیفش چند تا سلول داره. توی سلول اول هر ردیف یک دکمه رادیویی وجود داره که فرد میتونه اونو اونتخاب کنه.
میخوام جوری باشه که وقتی روی اون دکمه رادیویی کلیک کرد اون ردیف کلا نوشته هاش Bold بشه...ممنون میشم راهنمایی کنین....چیز به درد بخوری توی سرچ پیدا نشد

یه همچین چیزی الان پیدا کردم:
کد:
<html>

<style type="text/css">
<!--
..RowSelected {
color: blue;
font-weight: bold;
}
-->
</style>
</head>
<body>

<script type="text/javascript">
function styleToggle(rdoVar) {
for ( var i = 0; i < rdoVar.form.length; i++){

if (rdoVar.form[i].name == rdoVar.name) {
rdoVar.form[i].parentNode.style.color = rdoVar.form[i].checked?
'red' : '';
rdoVar.form[i].parentNode.style.fontWeight =
rdoVar.form[i].checked? 'bold' : '';
}

}
}
</script>

<form>
<table width="100%" border="1">
<tr>
<td><input type="radio" name="InterestingItem" id="afdsa"
value="Item 01" onClick="styleToggle(this)" />
Item 01</td>
<td>Description 01</td>
</tr>
<tr>
<td><input type="radio" name="InterestingItem" id="afdasfd"
value="Item 02" onClick="styleToggle(this)" />
Item 02</td>
<td>Description 03</td>
</tr>
<tr>
<td><input type="radio" name="InterestingItem" id="afadf"
value="Item 03" onClick="styleToggle(this)" />
Item 03</td>
<td>Description 03</td>
</tr>
</table>
</form>

</body>
</html>
ایرادی که داشت این بود که فقط سلول اول رو بولد میکرد و به بقیه کاری نداشت....
پایین اون برنامه کس دیگه ای اومد تابع رو اصلاح کنه...یه تابع جدید داد که کل ردیف رو اصلاح میکرد که اینه تابعش:
کد:
function styleToggle(rdoVar){

var tdNode= rdoVar.parentNode;
var trNode= tdNode.parentNode;

if( rdoVar.checked ){
trNode.style.color = "red";
trNode.style.fontWeight = "bold";
}else{
// etc..
}
}
اما ایراد این دومی اینه که وقتی روی یک دکمه رادیویی دیگه کلیک میکنی اون قبلیه همچنان بولده...
بنده طعم ايمان را نمي چشد، تا اينكه دريابد آنچه اتفاق نيفتاده است نمي شد كه اتفاق بيفتد؛و آنچه شده و اتفاق افتاده است,نمي شد كه نشود و اتفاق نيفتد....حضرت علي(ع)
  پاسخ
تشکر شده توسط :
#2
اینو امتحان کن :
کد:
<html>

<style type="text/css">
<!--
..RowSelected {
color: blue;
font-weight: bold;
}
-->
</style>
</head>
<body>

<script type="text/javascript">
function styleToggle(rdoVar) {
for ( var i = 0; i < rdoVar.form.length; i++){

if (rdoVar.form[i].name == rdoVar.name) {
rdoVar.form[i].parentNode.style.color = rdoVar.form[i].checked?
'red' : '';
rdoVar.form[i].parentNode.parentNode.style.fontWeight =
rdoVar.form[i].checked? 'bold' : '';
}

}
}
</script>

<form>
<table width="100%" border="1">
<tr>
<td><input type="radio" name="InterestingItem" id="afdsa"
value="Item 01" onClick="styleToggle(this)" />
Item 01</td>
<td>Description 01</td>
</tr>
<tr>
<td><input type="radio" name="InterestingItem" id="afdasfd"
value="Item 02" onClick="styleToggle(this)" />
Item 02</td>
<td>Description 03</td>
</tr>
<tr>
<td><input type="radio" name="InterestingItem" id="afadf"
value="Item 03" onClick="styleToggle(this)" />
Item 03</td>
<td>Description 03</td>
</tr>
</table>
</form>

</body>
</html>
  پاسخ
تشکر شده توسط : webnevesht
#3
تشکر...حل شد
بنده طعم ايمان را نمي چشد، تا اينكه دريابد آنچه اتفاق نيفتاده است نمي شد كه اتفاق بيفتد؛و آنچه شده و اتفاق افتاده است,نمي شد كه نشود و اتفاق نيفتد....حضرت علي(ع)
  پاسخ
تشکر شده توسط :
#4
با جی‌کوئری هم میتونستی انجامش بدی،
کد:
<style type="text/css">
    .bold
    {
        font-weight: bold;
    }
</style>

<script>
    $(document).ready(function(){
        $("input[type='checkbox']").change(function(){
            var itsId = $(this).data("id");
            if($(this).is(":checked")) $("tr[data-id='"+itsId+"']").attr("class","bold");
            else $("tr[data-id='"+itsId+"']").removeClass("bold");
        });
    });
</script>

<body>
    <table>
        <tr>
            <td><input type="checkbox" data-id="1" />check here</td>
        </tr>
        <tr data-id="1">
            <td>My name is, Alireza</td>
        </tr>
    </table>
</body>
غایب
  پاسخ
تشکر شده توسط :
#5
سلام مجدد....این تابع خیلی خوبه...فقط یه مشکلی الان خوردم....اگه توی یه ردیف دو سه تا دکمه رادیویی باشه باید روی هر کدوم که کلیک میکنیم بازم اون tr بولد بشه....اما فقط روی دکمه رادیویی آخری اون tr کار میکنه و اگه توی اون ردیف 2تا دکمه باشه روی اولی که میزنیم هیچ اتفاقی نمیوفته...میتونین این تابعو تغییر بدین جوری که هرچندتا دکمه رادیویی توی اون tr باشه اون tr بولد بشه؟ممنون
بنده طعم ايمان را نمي چشد، تا اينكه دريابد آنچه اتفاق نيفتاده است نمي شد كه اتفاق بيفتد؛و آنچه شده و اتفاق افتاده است,نمي شد كه نشود و اتفاق نيفتد....حضرت علي(ع)
  پاسخ
تشکر شده توسط :
#6
نقل قول: سلام مجدد....این تابع خیلی خوبه...فقط یه مشکلی الان خوردم....اگه توی یه ردیف دو سه تا دکمه رادیویی باشه باید روی هر کدوم که کلیک میکنیم بازم اون tr بولد بشه....اما فقط روی دکمه رادیویی آخری اون tr کار میکنه و اگه توی اون ردیف 2تا دکمه باشه روی اولی که میزنیم هیچ اتفاقی نمیوفته...میتونین این تابعو تغییر بدین جوری که هرچندتا دکمه رادیویی توی اون tr باشه اون tr بولد بشه؟ممنون
با سلکتورای جی کوئری اشنا شو. بچه ها وب نوشت ، وب نوشت بچه Smile
میتونی ختی این سلکتور رو واس دگمه بنویسی.
کد:
$("tr input[type='checkbox']").
غایب
  پاسخ
تشکر شده توسط :
#7
Big Grinقربونت...کمی آشنام


با همون کد جاوااسکریپت بالا نمیشه مشکل ما رو راه بندازی؟ من از اون کد استفاده کردم...اون جی کوئریه کار نکرد....
بنده طعم ايمان را نمي چشد، تا اينكه دريابد آنچه اتفاق نيفتاده است نمي شد كه اتفاق بيفتد؛و آنچه شده و اتفاق افتاده است,نمي شد كه نشود و اتفاق نيفتد....حضرت علي(ع)
  پاسخ
تشکر شده توسط :
#8
دوستان میشه راهنمایی بفرمایین؟ شدید لنگ این مساله موندمBlushUndecided
بنده طعم ايمان را نمي چشد، تا اينكه دريابد آنچه اتفاق نيفتاده است نمي شد كه اتفاق بيفتد؛و آنچه شده و اتفاق افتاده است,نمي شد كه نشود و اتفاق نيفتد....حضرت علي(ع)
  پاسخ
تشکر شده توسط :
#9
با همون کدی که بهت دادم اگه 100 تا هم توی یه ردیف باشه روی هر کدوم کلیک کنی bold میشه کل ردیف ...
« چون اون کد میگه اگه روی دکمه کلیک شد تو "والد" رو bold کن که تمام دکمه های یه ردیف والدشون میشه همون ردیف tr ... »
من الان با همون بازم تست کردم :

کد:
<html>

<style type="text/css">
<!--
..RowSelected {
color: blue;
font-weight: bold;
}
-->
</style>
</head>
<body>

<script type="text/javascript">
function styleToggle(rdoVar) {
for ( var i = 0; i < rdoVar.form.length; i++){

if (rdoVar.form[i].name == rdoVar.name) {
rdoVar.form[i].parentNode.style.color = rdoVar.form[i].checked?
'red' : '';
rdoVar.form[i].parentNode.parentNode.style.fontWeight =
rdoVar.form[i].checked? 'bold' : '';
}

}
}
</script>

<form>
<table width="100%" border="1">
<tr>
<td><input type="radio" name="InterestingItem" id="afdsa"
value="Item 01" onClick="styleToggle(this)" />
Item 01</td>
<td><input type="radio" name="InterestingItem" id="afdsa"
value="Item 01" onClick="styleToggle(this)" />
Item 01</td>
<td>Description 01</td>
</tr>
<tr>
<td><input type="radio" name="InterestingItem" id="afdasfd"
value="Item 02" onClick="styleToggle(this)" />
Item 02</td>
<td><input type="radio" name="InterestingItem" id="afdasfd"
value="Item 02" onClick="styleToggle(this)" />
Item 02</td>
<td>Description 03</td>
</tr>
<tr>
<td><input type="radio" name="InterestingItem" id="afadf"
value="Item 03" onClick="styleToggle(this)" />
Item 03</td>
<td><input type="radio" name="InterestingItem" id="afadf"
value="Item 03" onClick="styleToggle(this)" />
Item 03</td>
<td>Description 03</td>
</tr>
</table>
</form>

</body>
</html>

کدی که الان نوشتی رو بذار ببینم .
  پاسخ
تشکر شده توسط :
#10
بینین مثلا همین کد شما رو اونجوری که باید توی فرم من نشون بده میذارم...
روی اولی ها میزنین اجرا نمیشه...روی دومی میزنین اجرا میشه
کد:
<html>

<style type="text/css">
<!--
..RowSelected {
color: blue;
font-weight: bold;
}
-->
</style>
</head>
<body>

<script type="text/javascript">
function styleToggle(rdoVar) {
for ( var i = 0; i < rdoVar.form.length; i++){

if (rdoVar.form[i].name == rdoVar.name) {
rdoVar.form[i].parentNode.style.color = rdoVar.form[i].checked?
'red' : '';
rdoVar.form[i].parentNode.parentNode.style.fontWeight =
rdoVar.form[i].checked? 'bold' : '';
}

}
}
</script>

<form>
<table width="100%" border="1">
<tr>
<td><input type="radio" name="InterestingItem" id="afdsa"
value="Item 01" onClick="styleToggle(this)" />
Item 01<br>
<input type="radio" name="InterestingItem" id="afdsa0"
value="Item 4" onClick="styleToggle(this)" checked="true" />
Item 01</td>
<td>&nbsp;</td>
<td>Description 01</td>
</tr>
<tr>
<td><input type="radio" name="InterestingItem" id="afdasfd"
value="Item 02" onClick="styleToggle(this)" />
Item 02<br>
<input type="radio" name="InterestingItem" id="afdasfd0"
value="Item 5" onClick="styleToggle(this)" />
Item 02</td>
<td>&nbsp;</td>
<td>Description 03</td>
</tr>
<tr>
<td><input type="radio" name="InterestingItem" id="afadf"
value="Item 03" onClick="styleToggle(this)" />
Item 03<br>
<input type="radio" name="InterestingItem" id="afadf0"
value="Item 6" onClick="styleToggle(this)" />
Item 03</td>
<td>&nbsp;</td>
<td>Description 03</td>
</tr>
</table>
</form>

</body>
</html>
بنده طعم ايمان را نمي چشد، تا اينكه دريابد آنچه اتفاق نيفتاده است نمي شد كه اتفاق بيفتد؛و آنچه شده و اتفاق افتاده است,نمي شد كه نشود و اتفاق نيفتد....حضرت علي(ع)
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان