Question

我有一个用户可以动态添加行或表的页面。我需要使用jQuery计算给定表上的行，以查看是否只需要插入行或行以及标题。现在，count只计算所有表中的所有行。我正在使用jQuery 1.7.2和jquery模板。

<div id="ClonePoint">
    <button id="exitSection" class="closesection"><span>Close</span></button> <br /> <br />
    <button class="btnEncode" id="buttonEncode">Encode</button>
    <input id="encryptedTokenClone"  />
    <button class="btnDecode" id="buttonDecode">Decode</button>                  
    <table class="tokenTable" cellpadding="3px">
        <tbody class="tokenBody" >
        </tbody>
    </table>
    <button id="addRow" class="addingRow">Add Row</button>   
</div>

添加行的jQuery

$('#BackgroundArea').on('click', '.addingRow', function () {
    var selectedDiv = $(this).parent();
    var selectedTable = $(selectedDiv).children('.tokenTable');
    var rowCount = 0;
    rowCount = $('.tokenTable .tokenBody').children('tr').length;
    if (rowCount > 0) {
        $("#tokenAddRowTemplate")
            .tmpl()
            .appendTo(selectedTable);
    } else {
        $("#TableHeader")
            .tmpl()
            .appendTo(selectedTable);
        $("#tokenAddRowTemplate")
           .tmpl()
           .appendTo(selectedTable);
    }
});

插入的html是

<script id="TableHeader" type="text/html">
    <tr id="TableHead">
        <th width="55px">Delete Row</th>
        <th align="right"> Key </th>
        <th align="left"> Value </th>
    </tr>
</script>
<script id="tokenAddRowTemplate" type="text/html">
    <tr id="tokenRow">
        <td class="deleteRow" id="tokenCell">
            <button class="deleteRow">
                <span>delete row</span>
            </button>
        </td>
        <td class="keyValue" id="tokenCell">
            <div class="edit"  contenteditable="true"></div>
        </td>
        <td class="valueValue" id="tokenCell">
            <div class="edit"  contenteditable="true"></div>
        </td>
    </tr>
</script>

Answer 1

这应该在你的表中给出tr计数。

$("#yourTableId tr").length

这是你在找什么？

Answer 2

如果每个表后面都有自己的“添加行”按钮：

var $table = $(this).prev(),
    rowCount = $table.find('.tokenBody').children('tr').length;

if (rowCount > 0) {
   ...

这假定表格后面紧跟着“添加行”按钮。

为了减少代码的脆弱性，可以考虑使用容器元素，如下所示：

<div class="tokenTableContainer">
    <table class="tokenTable">
        ...
    <table>
    <button class="addingRow">...</button>
</div>

然后你可以这样做：

$('.addingRow').click(function() {
    var $table = $(this).closest('.tokenTableContainer').find('.tokenTable');
    ...
});

计算特定表上的行

2 个答案: