Question

I have a code below where it displays a text input in one column, the total marks column in the second column and the marks remaining in the last column. The table looks like this below:

Marks Per Answer       Total Marks    Marks Remaining
(blank text input)      4              4
(blank text input)      6              6

But the problem I have is that the text inputs are empty, they should display a value of the “Total Marks” column (so 4 for the first text input and 6 for the second text input).

Also as both text inputs contains the total marks, under the “Marks Remaining” column, both rows should display 0. (for first row 4 from text input minus 4 under Total marks makes 0 for Marks Remaining for first row. For second row 6 from text input minus 6 under Total marks makes 0 for Marks Remaining for second row)

So the table should really look like this below:

Marks Per Answer              Total Marks    Marks Remaining
(text input value=4)            4              0
(blank text input value=6)      6              0

My question is that how can both steps above be solved by changing the jquery below:

$(function() {   
    //alert("here");         
    var questions = $('#markstbl td[class*="_ans"]').length;

    //disable single entry
    for (var i=0;i<=questions;i++){   
    if($("[class*=q"+i+"_mark]").length ==1){
    var t_marks = $("[class*=q"+i+"_ans]").html();
    //alert(t_marks);
    alert(t_marks);
    $("[class*=q"+i+"_mark]").val(t_marks).attr("disabled","disabled");
    //$("[class*=q"+i+"_mark]").attr("disabled","disabled");
    }                    
    }
    }

Below is the dynamic HTML table:

<table border='1' id='markstbl'>
<thead>
<tr>
<th class='answermarksth'>Marks per Answer</th>
<th class='totalmarksth'>Total Marks</th>
<th class='noofmarksth'>Marks Remaining</th>
</tr>
</thead>
<tbody>

<tr class="questiontd">
<td class="answertd" name="answers[]"><?php echo$searchAnswer[$key]?></td>
<td class="answermarkstd">
<input class="individualMarks q<?php echo$questionId?>_mark_0"  q_group="1" name="answerMarks[]" id="individualtext" type="text" />
</td>
<?php
    if($questionId != $prev_ques){
    ?>
<td class="totalmarkstd" rowspan="<?php echo$row_span[$questionId]?>"><?php echo$totalMarks[$key]?></td>
<td class="noofmarkstd q<?php echo$questionId?>_ans_text"  q_group="1" rowspan="<?php echo$row_span[$questionId]?>"><?php echo"<strong>".$searchMarks[$key]."</strong>"?></td>
<?php
    }
    ?>
</tr>
<?php
$prev_ques = $questionId;
}
?>
</tbody>
</table>

At the moment in the jquery function I am trying to use the t_marks variable to display the value in the text input but nothing is displayed within each SINGLE text input within a table row

Answer 1

I think I got it figured out for you. See http://jsfiddle.net/jhfrench/NsWRv/

I use jQuery to loop through the input elements classed as ‘.individualMarks’ with ('input.individualMarks').each(...), then use parent() to find the input’s parent td. From there, I get the values of that td’s siblings, then perform the simple math and assign the resulting value to the “marks remaining” column.

I take it one step further by assigning on onChange event that refires the updating function every time the input fields are manipulated.

If there will be many fields on this page, you might invest time in converting this into a plugin so you can execute it against jQuery objects and only update rows that pertain to the updated input field (right now it recalcs for all the inputs/table rows for a change to any input).

I’m not familiar with PHP, but I think your original code would result in duplicate IDs. Try to avoid that!