从输入创建和填充 Javascript 表

Question

我有一系列输入（一些收音机和几个复选框），例如：

<input type="radio" id="rd1" value="100" name="radios" class="slot" />
    <label for="rd1">Description of Radio 1</label>
<input type="radio" id="rd2" value="500" name="radios" class="slot" />
    <label for="rd1">Description of Radio 2</label>
<input type="radio" id="rd3" value="300" name="radios" class="slot" />
    <label for="rd1">Description of Radio 3</label>

<input type="checkbox" id="cb4" value="400" name="cb4" class="slot" />
    <label for="cb4">Description of CB 4</label>
<input type="checkbox" id="cb5" value="800" name="cb5" class="slot" />
    <label for="cb5">Description of CB 5</label>
<input type="checkbox" id="cb6" value="750" name="cb6" class="slot" />
    <label for="cb6">Description of CB 6</label>
<input type="checkbox" id="cb7" value="525" name="cb7" class="slot" />
    <label for="cb7">Description of CB 7</label>

我现在正试图创建一个表与JavaScript，将更新，以显示在列1中选择的输入，在第2列中的值，然后在底部的总的行。 （该表是使用 javascript 生成的，因为它在同一页面上的 4 个不同选项卡上重复使用，因此通过将新的 int 传递给函数，每件事都会获得一个唯一的 id，因此不会发生冲突）。

表格的结果格式应该是：

<table>
    <tbody>
        <tr>
            <th>Class</th>
            <th>Cost</th>
        </tr>
            <td>     <!— input ID (e.g. cb4) —> </td>
            <td>     <!—selected class cost —> </td>
        <tr>
        <tr>
            <td>Total: </td>
            <td id="costTotal"> <!— total of cost column —> </td>
        </tr>
    </tbody>
</table>

用于创建表格的 js 非常有效，我会弄清楚最后一点，但我正在努力如何进行行插入。

作为复选框被选择它们的输入ID，然后相应的值应插入到表与那么总TD更新来概括。如果取消选择复选框，则该行的相应行将被删除。对于具有按升序顺序添加一个新行积分（即，如果被选择的无线电1，则CB3，而CB2后，对1和3之间出现CB2的行选择时）。 P>

非常感谢您对此提出任何建议/建议/指导。

Answer 1

我不确定，我理解洞的想法。也许是这样：

$(document).on('change', '.tbl-src input', function(){
  createTable('.tbl-src', '.table-holder'); 

});


function createTable(selectorSrc, selectorDest){
 var html = "<table>\
    <tbody>\
        <tr>\
            <th>Class</th>\
            <th>Cost</th>\
        </tr>";

  var sum = 0;  
  $(selectorSrc).find('input:checked').each(function(index, el){
     var $el = $(el);
    var val = parseFloat($el.val());
    var name = $el.attr('name');
     sum += val;

     html += "<tr>\
      <td>" + name + "</td> \
      <td>" + val + "</td> \
      </tr>";

  });

        html += "<tr>\
            <td>Total: </td>\
            <td id=\"costTotal\">" + sum + "</td>\
        </tr>\
    </tbody>\
</table>";
  $(selectorDest).html(html);
}

试试这个代码http://jsbin.com/cizovovo/2/