如何获取td值在同一行中选中了哪个复选框

时间:2018-03-15 03:03:30

标签: javascript jquery

在我的项目中,我使用表格。

我的HTML代码是:

 <table id="assTB" border="1px" cellspacing="0">
       <colgroup>
       <col style="width:15%">
       <col style="width:15%">
       <col style="width:70%">
       </colgroup>
       <tbody>
       <tr style="height:35px">
      <td   bgcolor="#CDCDCD"><b><input type="checkbox" id="assCB"></b></td>
       <td   bgcolor="#CDCDCD"><b>id</b></td>
       <td   bgcolor="#CDCDCD"><b>name</b></td>
       </tr>
       </tbody>
       <tr>
       <td><b><input type='checkbox'></b></td>
       <td>1</td>
       <td>Tom</td>
       </tr>    
       <tr>
       <td><b><input type='checkbox'></b></td>
       <td>2</td>
       <td>John</td>
       </tr>
   </table>
  <input type="button" onclick="selAtt()">

我的js代码是:

function selAtt()
{
    var xzyId=document.getElementById("assTB");//tableID
    var checked=xzyId.getElementsByTagName("input");//checkbox


    var names = [];

    for(i=1;i<checked.length;i++)
    {
      if(checked[i].checked)
      {
        //rete=checked[i].parentNode.parentNode;//works fail
        //rete=checked[i].closest("tr");//works fail
        //rete=checked[i].parent().prev();//works fail
        rete = checked[i].parent().prev();//works fail
        var stNum=rete.find("td:eq(2)").text();
        names.push(stNum);
      }
    }

    for(i=0;i<names.length;i++)
    {
        alert(names[i]);
    }
    }
}

现在我想在同一行中选中复选框时获取名称。

我已尝试过四种方法来获取rete,如上面的代码所示。

但不幸的是,他们都失败了。谁能帮帮我?

1 个答案:

答案 0 :(得分:1)

  1. 使用map()添加数组
  2. 使用:选中以仅选中已选中的复选框
  3. 使用:nth-​​child获取所需的td(:nth-​​child index以1开头)
  4. $("#button").click(function() {
      var arr = $(':checkbox:checked').map(function() {
        var tr = $(this).closest('tr');
        var obj = {};
    
        obj['id'] = tr.find('td:nth-child(2)').text();
        obj['name'] = tr.find('td:nth-child(3)').text();
    
        return obj;
      }).get();
      console.log(arr)
    
    })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table id="assTB" border="1px" cellspacing="0">
      <colgroup>
        <col style="width:15%">
        <col style="width:15%">
        <col style="width:70%">
      </colgroup>
      <tbody>
        <tr style="height:35px">
          <td bgcolor="#CDCDCD"><b><input type="checkbox" id="assCB"></b></td>
          <td bgcolor="#CDCDCD"><b>id</b></td>
          <td bgcolor="#CDCDCD"><b>name</b></td>
        </tr>
      </tbody>
      <tr>
        <td><b><input type='checkbox'></b></td>
        <td>1</td>
        <td>Tom</td>
      </tr>
      <tr>
        <td><b><input type='checkbox'></b></td>
        <td>2</td>
        <td>John</td>
      </tr>
    </table>
    <input type="button" value="button" id="button">

    仅限名称:

    $("#button").click(function() {
      var arr = $(':checkbox:checked').map(function() {
        var tr = $(this).closest('tr');
        return tr.find('td:nth-child(3)').text();
      }).get();
      console.log(arr)
    
    })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table id="assTB" border="1px" cellspacing="0">
      <colgroup>
        <col style="width:15%">
        <col style="width:15%">
        <col style="width:70%">
      </colgroup>
      <tbody>
        <tr style="height:35px">
          <td bgcolor="#CDCDCD"><b><input type="checkbox" id="assCB"></b></td>
          <td bgcolor="#CDCDCD"><b>id</b></td>
          <td bgcolor="#CDCDCD"><b>name</b></td>
        </tr>
      </tbody>
      <tr>
        <td><b><input type='checkbox'></b></td>
        <td>1</td>
        <td>Tom</td>
      </tr>
      <tr>
        <td><b><input type='checkbox'></b></td>
        <td>2</td>
        <td>John</td>
      </tr>
    </table>
    <input type="button" value="button" id="button">