javascript - 从当前点击的td和当前行的第一个td获取隐藏字段

Question

考虑一个场景

我有一个表，有 8 列，每列都有一定数量的隐藏字段 - 假设有 5 个隐藏字段。

我想要实现的是当我单击特定单元格时获取所有隐藏字段的值，并且我还希望从[单元格]当前单击的行的第一个 td 中获取隐藏值

取得的成就

我能够获取当前单击的行单元格的第一个子单元格的隐藏字段值，如下所示

element.closest("tr").find("td:first").find("input:hidden")

这将导致 3，因为第一个单元格始终有 3 个输入。

我被困的地方:

我正在获取第一个单元格的隐藏输入值，但无法获取当前单击单元格的隐藏输入值。

这是示例 HTML

<table>
   <tr>
      <td style="width: 50px;">4th Class( A ) 
         <input id="SectionID" name="SectionID" type="hidden" value="7">
         <input id="SectionDetailID" name="SectionDetailID" type="hidden" value="1">
         <input id="SectionName" name="SectionName" type="hidden" value="4th Class( A ) ">
      </td>
      <td class="cells" onclick="fetchData(this);">
         <div>
            <div class="dataRow">
               <div class="cellLabel">Name:</div>
               <div class="cellValue">P D S</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Sub:</div>
               <div class="cellValue">Hindi</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Period:</div>
               <div class="cellValue">Period 2</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">From:</div>
               <div class="cellValue">11:00</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">To:</div>
               <div class="cellValue">12:00</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Year:</div>
               <div class="cellValue">2014</div>
            </div>
         </div>
         <input id="TimeTableDtlID" name="TimeTableDtlID" type="hidden" value="1">
         <input id="TimeTableHdrID" name="TimeTableHdrID" type="hidden" value="7">
         <input id="PeriodID" name="PeriodID" type="hidden" value="38">
         <input id="PeriodName" name="PeriodName" type="hidden" value="Period 2">
         <input id="PeriodFromTime" name="PeriodFromTime" type="hidden" value="11:00">
         <input id="PeriodToTime" name="PeriodToTime" type="hidden" value="12:00">
         <input id="TTYear" name="TTYear" type="hidden" value="2014">
         <input id="SubjectName" name="SubjectName" type="hidden" value="Hindi">
      </td>
      <td class="cells" onclick="fetchData(this);">
         <div>
            <div class="dataRow">
               <div class="cellLabel">Name:</div>
               <div class="cellValue">J P Pl</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Sub:</div>
               <div class="cellValue">English</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Period:</div>
               <div class="cellValue">Period 2</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">From:</div>
               <div class="cellValue">11:00</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">To:</div>
               <div class="cellValue">12:00</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Year:</div>
               <div class="cellValue">2014</div>
            </div>
         </div>
         <input id="TimeTableDtlID" name="TimeTableDtlID" type="hidden" value="3">
         <input id="TimeTableHdrID" name="TimeTableHdrID" type="hidden" value="7">
         <input id="PeriodID" name="PeriodID" type="hidden" value="38">
         <input id="PeriodName" name="PeriodName" type="hidden" value="Period 2">
         <input id="PeriodFromTime" name="PeriodFromTime" type="hidden" value="11:00">
         <input id="PeriodToTime" name="PeriodToTime" type="hidden" value="12:00">
         <input id="TTYear" name="TTYear" type="hidden" value="2014">
         <input id="SubjectName" name="SubjectName" type="hidden" value="English">
      </td>
   </tr>
   </tbody>
</table>

jQuery

function fetchData(element) {
   var $element = $(element);
   var objHidden = [];
   console.log($element.closest("tr").find('td:first').andSelf().find("input:hidden").length); // Returns 19 Where it must be 11
   $element.closest("tr").find('td:first').andSelf().find("input:hidden").each(function (i, elem) {
      objHidden[elem.getAttribute("name")] = elem.value;
   });
   console.log(objHidden); // Getting same values always
}

Fiddle DEMO

编辑

这是一个简单的场景，当我单击单元格意味着 TD 时，除了第一个单元格，我想要当前单击的单元格中的隐藏值以及第一个 TD 中的隐藏值code> 在当前行未被点击的地方。

如何获取当前点击单元格的隐藏字段和最近行第一个td的隐藏字段？

非常感谢任何形式的帮助。

Answer 1

andSelf 和最后一个 jQuery 对象进入当前堆栈。但如果我们仔细看看你的台词:

$element.closest("tr").find('td:first').andSelf().find("input:hidden")

您执行.closest().find().andSelf()。这意味着 andSelf 返回 .closest('tr')。

尝试使用add代替:

$element.closest("tr").find('td:first').add($element).find("input:hidden")

或者，您也可以使用它:

$element.siblings(":first").andSelf().find("input:hidden");