Javascript 如何获取表单元格元素的第一个子Id

我想使用javascript获取表单元格元素的id。我试过上面提到的方法

alert(tableId.rows[i].cells[5].firstChild.id);

这很好：

alert(tableId.rows[i].cells[5].firstChild.value);

但如何获取元素的id：

表:

    <table border="1px solid" style="width:100%;text-align: center;" class="item_table" id="item_grid">
        <thead>
            <tr>
                <th>Type</th>
                <th>Item</th>
                <th>Gross wt.</th>
                <th>Ded.</th>
                <th>Purity</th>
                <th>Remark</th>
            </tr>
        </thead>
        <tbody>
        {% for subform in item_form %}
           <tr class="inline {{ item_form.prefix }}">
            {{ subform.non_field_errors }}
            {{ subform.type.errors }}
            <td>{{ subform.type }}</td>
            {{ subform.name.errors }}
            <td>{{ subform.name }}</td>
            {{ subform.weight.errors }}
            <td>{{ subform.weight }}</td>
            {{ subform.deduction.errors }}
            <td>{{ subform.deduction }}</td>
            {{ subform.purity_percent.errors }}
            <td>{{ subform.purity_percent }}</td>
            {{ subform.fine_weight.errors }}
            <td style="visibility: hidden;display: none;">
            {{ subform.fine_weight }}
            </td>
            {{ subform.remark.errors }}
            <td>{{ subform.remark }}</td>
           </tr>
        {% endfor %}
        </tbody>
        {{ item_form.management_form }}
    </table>

呈现的表体：

<tbody>
<tr class="inline item_set dynamic-form">
    <td>
        <select id="id_item_set-0-type" name="item_set-0-type" required="required">
            <option value="">---------</option>
            <option value="1" selected="selected">GOLD</option>
            <option value="2">SILVER</option>
       </select></td>
   <td>
       <select id="id_item_set-0-name" name="item_set-0-name" required="required">
           <option value="">---------</option>
           <option value="13" selected="selected">ankit</option>
           <option value="6">bangle</option>
           <option value="1">chain</option>
           <option value="3">churi</option>
           <option value="10">haha</option>
           <option value="12">huha</option>
           <option value="7">lengha</option>
           <option value="4">lungi</option>
           <option value="9">new test</option>
           <option value="8">test</option>
           <option value="11">test item</option>
      </select>
     <a href="/add/item_name/popup/" class="add-another" id="add_id_item_set-0-name" onclick="return showAddAnotherPopup(this);">
        <img src="/static/girvi/images/icon_addlink.gif" alt="Add Another" height="10" width="10">
    </a>
    </td>
    <td>
        <input id="id_item_set-0-weight" maxlength="6" name="item_set-0-weight" onkeypress="return isNumberKey(event,&quot;id_item_set-0-weight&quot;)" onkeyup="return isNumberKey(event,&quot;id_item_set-0-weight&quot;)" required="required" size="12" value="100" type="text">
    </td>
    <td>
        <input class="per" id="id_item_set-0-deduction" maxlength="6" name="item_set-0-deduction" onkeypress="return isNumberKey(event,&quot;id_item_set-0-deduction&quot;)" onkeyup="return isNumberKey(event,&quot;id_item_set-0-deduction&quot;)" required="true" size="10" value="10" type="text">
    </td>
    <td>
        <input class="per" id="id_item_set-0-purity_percent" maxlength="3" name="item_set-0-purity_percent" onkeypress="return isNumberKey_purity(event)" onkeyup="return isNumberKey_purity(event)" required="required" size="10" value="80" type="text">
    </td>
    <td style="visibility: hidden;display: none;">
        <input id="id_item_set-0-fine_weight" maxlength="6" name="item_set-0-fine_weight" required="true" size="10" value="" type="hidden">
    </td>
    <td>
        <textarea cols="40" id="id_item_set-0-remark" maxlength="150" name="item_set-0-remark" placeholder="OK" rows="10">
            OK
        </textarea>
    <a style="display: none;" class="delete-row" href="javascript:void(0)">
        del
    </a>
    </td>
    </tr>
    <tr>
    <td colspan="7">
    <a class="add-row" href="javascript:void(0)">
        Add
    </a>
    </td>
    </tr>
    </tbody>

---

虽然没有提供任何HTML标记进行验证，但您的操作是正确的。我假设您的第一个子元素实际上没有与之关联的id。将需要html验证。实际呈现的html，而不是模板语法…我不知道您的html呈现是否包含空格，但如果包含空格，请将.firstChild更改为.firstElementChild，并在需要支持时将其修补到IE8中。虽然您说.value有效，但我不确定这是问题所在。请使用tableId.outerHTML快速获取呈现的HTML。