开发者

Get respective value which is checked by chk Box in HTML Table

开发者 https://www.devze.com 2023-02-28 06:17 出处:网络
As I have generated HTML Table (Asp.net Table), now I need the value of the Cell One when that respective checkBox is checked.

As I have generated HTML Table (Asp.net Table), now I need the value of the Cell One when that respective checkBox is checked.

Suppose the second check box is clicked I need the value of the second row E.g. if month 2 is clicked I need the value 553.5000

USING JAVA SCRIPT.

As well as the total of the same..

Total of the check value..

Get respective value which is checked by chk Box in HTML Table

<table border="2" id="ctl00_ctl00_B_A_ucStudentRegistration1_TblTotalPay">
        <tbody><tr>
            <td class="caption">Total Amount</td><td class="caption">Paid Fees</td>
        </tr><tr style="border-width: 3px; border-style: solid;">
            <td>5889.2400</td><td><span disabled="disabled"><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" disabled="disabled" checked="checked" name="ctl00$ctl00$B$A$ucStudentRe开发者_如何学Gogistration1$chkMonth1" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth1"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth1">Month1</label></span></td>
        </tr><tr>
            <td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth2" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth2"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth2">Month2</label></td>
        </tr><tr>
            <td>885.6000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth3" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth3"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth3">Month3</label></td>
        </tr><tr>
            <td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth4" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth4"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth4">Month4</label></td>
        </tr><tr>
            <td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth5" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth5"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth5">Month5</label></td>
        </tr><tr>
            <td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth6" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth6"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth6">Month6</label></td>
        </tr><tr>
            <td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth7" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth7"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth7">Month7</label></td>
        </tr>
    </tbody></table>


Your question doesn't disclose what you're really after and doesn't provide a dev-friendly example, but let's try anyway, shall we?

Check out the Working Demo (open the console).

Here's the JS for your convenience

$('.TotalPay input[type=checkbox]').change(function(){
    var amount = $(this).parent().siblings().text();
    console.log(amount);
});

Using JavaScript, we can bind event handlers to DOM elements from outside the markup, thus leaving the HTML clean and semantic. onXXXXX attributes might work, but you should really read about Unobtrusive JS.

In my example I chose jQuery, which greatly simplifies tedious tasks like DOM traversal. Basically, here's what this snippet do:

  1. Grab the relevant checkboxes by CSS selector,
  2. attach an anonymous handler to their 'change' event.
  3. in it, traverse for the checkbox's 'uncle' and store its text in the amount variable

p.s. Please use semantic classnames for your elements. .net screws up your IDs, so IMO just rely more heavily on classes. Also, "jQuery is great, learn JavaScript first"™.

0

精彩评论

暂无评论...
验证码 换一张
取 消