在使用框架的前端页面中添加“获取”被选中的复选框的内容

如上图，我的任务是添加一个“获取”按钮，可以获取选中的复选框这一行的内容，再将获取到的数据准换成JSON的格式，方便以后的发送。

1、分解任务

对于我来说，直接实现“获取”功能有一定难度，我会不知道从何入手。因此，我会将任务分成几步，逐步实现，最终达到目的。①在未使用框架的普通表格中获取选中复选框所在行的内容，通过将数据打印在控制台进行验证。②在使用框架的表格中获取。③将获取到的数据转换成我们所需的json格式，打印到控制台验证。

2、代码实现

实现完后，发现其实并不复杂。①通过table的id使用find()方法，发现被选中的<input type="checkbox" class="checkboxes" value="1"/>②通过parent()方法找到此复选框所在的行<tr>③再根据每个单元格自身的id通过find()找到相应的单元格<td>，通过html()获取此单元格的内容④最后通过chechkedFile['id'] = row.find("[name='fileId']").html()，设置我们需要的json格式。

<table class="table table-striped table-bordered table-hover" id="sample_1">
   <thead>
       <tr>
          <th class="table-checkbox"><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" /></th>
          <th>ID</th>
          <th >文件路径</th>
          <th >文件名</th>
          <th >更新日期</th>        
      </tr>
   </thead>
   <tbody>
       <tr id="list" class="odd gradeX">
          <td><input type="checkbox" class="checkboxes" value="1"/></td>
          <td name="fileId">单元1</td>
          <td name="filePath">单元2</td>
          <td name="fileName">单元3</td>
          <td name="fileDate">单元4</td>
       </tr>
       <tr id="list1" class="odd gradeX">
          <td><input type="checkbox" class="checkboxes" value="2"/></td>
          <td name="fileId">单元5</td>
          <td name="filePath">单元6</td>
          <td name="fileName">单元7</td>
          <td name="fileDate">单元8</td>
       </tr>
   </tbody>
</table>

function getFile1() {
        var allFile = [];
        var check = $('#sample_1').find('input[type=checkbox]:checked');
        console.log(check);
        check.each(function () {
            var chechkedFile = {};
            var row = $(this).parent('span').parent('div').parent('td').parent('tr');
            console.log(row);


            chechkedFile['id'] = row.find("[name='fileId']").html();
            chechkedFile['filePath'] = row.find("[name='filePath']").html();
            chechkedFile['fileName'] = row.find("[name='fileName']").html();
            chechkedFile['updateDate'] = row.find("[name='fileDate']").html();

            console.log(row.find("[name='fileId']"));

            allFile.push(chechkedFile);
        })
        console.log(JSON.stringify(allFile));     
    }

遇到的问题

其实代码并不多，就遇到了一个有意思的问题。看上述代码复选框所处位置的代码结构如下图所示

<td>
	<input/>
</td>

但实际上，应该是这样的

<td>
	<div>
		<span>
			<input/>
		</span>
	</div>
</td>

原因在于我使用的是框架的，在设计前端页面时，我只需要一行代码就能使得此处的布局变得好看，以为框架会调用文件中写好的代码，这也就会造成上面的情况，我是通过F12到页面中发现的，所以我直接parent(“td”)会什么也找不到。首先我们要了解一个知识点parent()只能是直接的父元素，parents()向上遍历所有有关的元素，因此二者结合使用就可以精准地确定某个元素。因此有两种解决方法①parent('span').parent('div').parent('td').parent('tr')②parents(“tr”),在html部分，复选框的父元素只有一个<tr>,向上遍历就可以精准找到。