-1

在我的应用程序中，我有一个如下所示的表格，例如：

Question No.    Question                 Answer     Marks per Answer    Total Marks
1               Here are 2 answers       B          (text input)            5
                                         D          (text input)
2               Here is a single answer  True       (text input)            5

在上表中，我有一个属于每个答案的文本输入。现在每个问题都有自己的总分。我想要做的是，如果用户在文本输入中输入一个数字，它应该对文本输入中输入的数字与“总分”列下的数字之间的差异进行计算。所以如果你看下面的例子：

 Question No.   Question                 Answer     Marks per Answer    Total Marks
 1              Here are 2 answers       B          (text input) = 2        2
                                         D          (text input) = 1
 2              Here is a single answer  True       (text input) = 5        0

正如您在上表中看到的，问题 1 中答案的文本输入总共等于 3。所以 5（来自问题 1 的总分）减去 3 = 2（现在总分等于 2）

对于问题 2，问题 2 中答案的文本输入等于 5，因此 5（来自问题 2 的总分）减去 5 = 0（总分现在等于 0）。

我的问题：

  1. 执行这些计算的最佳方法是如何以及最好的方法是什么？

2.我还想要的是，如果一个问题只包含一个答案（如上例中的问题 2 只有一个答案），那么我希望文本输入变为只读，并且文本输入应显示与总分因为无论如何它必须等于相同的分数，所以它看起来像下面这样：

Question No.   Question                  Answer     Marks per Answer             Total Marks
 2              Here is a single answer  True       (text input(readonly)) = 5        0

这是一个 jsfiddle演示，因此您知道 HTML 代码的样子。在 jsffidle 中，我所做的是在文本框中插入了值，但是我将问题的“总分”留给了“5”，而实际上，如果计算总分之间的差异，它们都应该为“0”标记和在文本输入中输入的数字。问题 2 的文本输入也是只读的，这是因为它只是这个问题的一个答案

以下是 jsfiddle 中的 html 代码：

<table border='1' id='markstbl'>
<tr>
<th class='questionth'>Question No.</th>
<th class='questionth'>Question</th>
<th class='answerth'>Answer</th>
<th class='answermarksth'>Marks per Answer</th>
<th class='noofmarksth'>Total Marks</th>
</tr>
<tr class="questiontd">
<td class="questionnumtd" rowspan="2">1</td>
<td class="questioncontenttd" rowspan="2">Here are 2 Answers Question</td>
<td class="answertd">B</td>
<td class="answermarkstd"><input class="individualMarks" name="answerMarks[]" id="individualtext" type="text" value="3" /></td>
<td class="noofmarkstd" rowspan="2">5</td>
</tr>
<tr class="questiontd">
<td class="answertd">D</td>
<td class="answermarkstd"><input class="individualMarks" name="answerMarks[]" id="individualtext" type="text" value="2" /></td>
</tr>
<tr class="questiontd">
<td class="questionnumtd" rowspan="2">2</td>
<td class="questioncontenttd" rowspan="2">Here is single Answer Question</td>
<td class="answertd">True</td>
<td class="answermarkstd"><input class="individualMarks" name="answerMarks[]" id="individualtext" type="text" value="5" readonly="readonly"/></td>
<td class="noofmarkstd" rowspan="2">5</td>
</tr>
</table>

我只想说，可能有很多问题和很多答案，请不要只提供一个只适合这个例子的答案。如果一个问题有很多答案，它就需要工作。

4

2 回答 2

1

这是一个解决方案，它是进行计算的基本框架。如果您需要任何验证规则，则需要进行调整

$('tr').each(function() {
    var $input = $(this).find('input');
    var $row = $(this);
    var is_multiple = !$input.prop('readonly');
    var rowClass = is_multiple ? 'multiple' : 'single';
    if (is_multiple) {
        var is_first = $row.find('td').length == 5;
        rowClass += is_first ? ' first' : ' second';
    } else {
        /* readonly just needs marks changed once on page load */
        $row.find('.noofmarkstd').text(5 - $input.val());
    }
    $input.addClass(rowClass);
});

$('input.multiple').keyup(function() {
    var $input = $(this);
    var is_first = $input.is('.first');
    var $row = $input.closest('tr');
    var $otherRow = $row[is_first ? 'next' : 'prev']();
    var $marks = is_first ? $row.find('.noofmarkstd') : $otherRow.find('.noofmarkstd');

    var calcs = 5 - ($input.val() || 0) - ( $otherRow.find('input.multiple').val() || 0);
    $marks.text(calcs);    
});

/* if need calcs for multiples generated on pageload trigger a change on the first in set*/
 $('input.first').change();

演示：http: //jsfiddle.net/jTXy5/1/

于 2012-11-07T11:06:57.630 回答
0

如果您正在处理的值是由字符串表示的数字，并且您正在执行简单的数学运算，例如加法、除法等，那么您只需要小心加法即可。

带有“+”运算符且一个值为字符串的表达式将导致它被视为连接字符串而不是添加数字。因此，您可以将所有内容都转换为数字（例如使用 parseInt、parseFloat 或 Number 作为函数调用），或者您可以只在有加法的地方处理它。

例如给定字符串值：

var a = '5';
var b = '6;

在以下所有内容中，a并且b由于使用了数学运算符而被转换为数字：

 a * b // 30 

 a - b // -1 

 a / b // 0.833333...

但

 a + b // 56

因为如果其中一个操作数是字符串，则所有其他操作数都将转换为字符串，并且“+”用于连接。

因此，对于添加，您可以执行以下操作：

 +a + +b // 11

在不能发生加法或连接的地方作为“+”会导致它被视为一元运算符，因此它将 a 和 b 转换为数字。因此，中间的“+”被视为加法，因为它处理的是数字。

在应用“+”之前导致 a 和 b 的值成为数字的任何方案都意味着它被视为加法，例如：

parseInt(a) + parseInt(b);

Number(a) + Number(b);

a*1 + b*1  // since multiplication is done before addition

等等。只需使用任何看起来最好的东西，并且对于那些试图维护你的代码的人（可能是你）来说是最清楚的。

于 2012-11-07T02:38:34.023 回答