jQuery：如何获取所选单元格的col和row标头

时间：2019-02-21 23:18:06

标签： javascript jquery html datatable

我目前正在研究具有WebView的JavaFX项目。 HTML代码是由String Builder构建的。

  

我想获取所选单元格的列标题和行标题。

我的Java代码需要它们。 您可以在following example中找到网页的当前状态。

代码在这里：

gitlab-runner exec docker build_container --docker-privileged
Runtime platform                                    arch=amd64 os=linux pid=10088 revision=8bb608ff version=11.7.0
WARNING: You most probably have uncommitted changes. 
WARNING: These changes will not be tested.         
Running with gitlab-runner 11.7.0 (8bb608ff)
Using Docker executor with image docker:stable ...
Starting service docker:stable-dind ...
Pulling docker image docker:stable-dind ...
Using docker image sha256:5b626cc3459ad077146e8aac1fbe25f7099d71c6765efd6552b9209ca7ea4dc1 for docker:stable-dind ...
Waiting for services to be up and running...
Pulling docker image docker:stable ...
Using docker image sha256:73d492654a095a2f91078b2dfacd0cfe1a1fe25412fac54b4eb2f5a9609ad418 for docker:stable ...
Running on runner--project-0-concurrent-0 via x1...
Cloning repository...
Cloning into '/builds/project-0'...
done.
Checking out 85297912 as master...
Skipping Git submodules setup
$ echo $CI_JOB_TOKEN

$ docker login -u gitlab-ci-token -p $CI_JOB_TOKEN registry.gitlab.com
WARNING! Using --password via the CLI is insecure. Use --password-stdin.
Error response from daemon: Get https://registry-1.docker.io/v2/: unauthorized: incorrect username or password
ERROR: Job failed: exit code 1
FATAL: exit code 1

$(document).ready(function() {
  $("td").click(function() {
    $("td.selected").removeClass("selected");
    $(this).addClass("selected");
  });
});

您可以在jsfiddle中看到的CSS

2 个答案:

答案 0 :(得分：1)

最困难的部分是获取列标题和行标题，这可以通过引用表父元素然后单击被单击元素的特定列/行来实现。

var columnHeader = e.delegateTarget.rows[0].cells[this.cellIndex]
var rowHeader = this.parentNode.cells[0];

一旦有了这些元素，就可以使用$(element).height();和$(element).width();轻松测量宽度和高度。

让我知道这是否对您有用。

$(document).ready(function() {
  $('table').on('click', 'td', function(e) {
    var columnHeader = e.delegateTarget.rows[0].cells[this.cellIndex]
    var rowHeader = this.parentNode.cells[0];
    console.log(rowHeader)
    console.log(columnHeader)
    var rowHeadWidth = $(rowHeader).width();
    var rowHeadHeight = $(rowHeader).height();
    var columnHeadWidth = $(columnHeader).width();
    var columnHeadHeight = $(columnHeader).height();
    console.log("row header dimensions are: " + rowHeadWidth + " x " + rowHeadHeight)
    console.log("column header dimensions are: " + columnHeadWidth + " x " + columnHeadHeight)
    $("td.selected").removeClass("selected");
    $(this).addClass("selected");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>

<body>
  <table id='bookingTable'>
    <tr>
      <td></td>
      <th scope='col'>21.2.2019</th>
      <th scope='col'>22.2.2019</th>
      <th scope='col'>23.2.2019</th>
      <th scope='col'>24.2.2019</th>
      <th scope='col'>25.2.2019</th>
      <th scope='col'>26.2.2019</th>
      <th scope='col'>27.2.2019</th>
    </tr>
    <tr>
      <th scope='row'>1</th>
      <td colspan='1'>
        <div id='name'> Person One</div>
        <div id='bid'>B-ID:1</div>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>2</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>3</th>
      <td></td>
      <td colspan='4'>
        <div id='name'> Person Two</div>
        <div id='bid'>B-ID:2</div>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>4</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>5</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>6</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>7</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>8</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>9</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>10</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>11</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>

</html>

答案 1 :(得分：0)

我对jquery的想法。

$(document).ready(function () {
    $("td").click(function(){
        $("td.selected").removeClass("selected");
        $(this).addClass("selected");
        let rootMe = $(this).parents()[0];
        let spanValue = Number($(this).attr('colspan')) || 1;
        getCurrentTHhtml(rootMe, spanValue);
    });
		
    function getTH(){
      let allTHValue = [];
      let column1 = $('#bookingTable tr').eq(0).find('th');
      column1.each(function(){
        allTHValue.push($(this).html());
      });
      return allTHValue;
    }
    
    function getCurrentTHhtml(rootMe, spanValue){

     let inMe = rootMe.children;
     let j;
     let p = 0;
     let myPoint;
     let allColsInRow = rootMe.children.length;
     let thValues = getTH();
     let result = [];
     for(j=0;j<inMe.length;j++){
     	if(inMe[j].localName === 'td'){
      	if(inMe[j].classList[0] === "selected"){
        	myPoint = p;
        }
        p++;
      }
     }
     p=0;
     for(j=myPoint;j<allColsInRow;j++){
     	if(p<spanValue)
     		result.push(thValues[j]);
      p++;
     }
     console.log(result);
     console.log(inMe[0]);
    }
});
td,
th {
    border: 1px solid rgb(190, 190, 190);
    padding: 10px;
}

td:hover, td.selected {
    background-color: #FF9900
}


th[scope="col"] {
    background-color: #696969;
    color: #fff;
}

th[scope="row"] {
    background-color: #d7d9f2;
}

caption {
    padding: 10px;
    caption-side: bottom;
}

table {
    border-collapse: collapse;
    border: 2px solid rgb(200, 200, 200);
    letter-spacing: 1px;
    font-family: sans-serif;
    font-size: .8rem;
}
<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

</head>

<body>
    <table id='bookingTable'>
        <tr>
            <td></td>
            <th scope='col'>21.2.2019</th>
            <th scope='col'>22.2.2019</th>
            <th scope='col'>23.2.2019</th>
            <th scope='col'>24.2.2019</th>
            <th scope='col'>25.2.2019</th>
            <th scope='col'>26.2.2019</th>
            <th scope='col'>27.2.2019</th>
        </tr>
        <tr>
            <th scope='row'>1</th>
            <td colspan='1' >
                <div id='name'> Person One</div>
                <div id='bid'>B-ID:1</div>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope='row'>2</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope='row'>3</th>
            <td></td>
            <td colspan='4'>
            <div id='name'> Person Two</div>
                <div id='bid'>B-ID:2</div>
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope='row'>4</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope='row'>5</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope='row'>6</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope='row'>7</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope='row'>8</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope='row'>9</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope='row'>10</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope='row'>11</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

</html>

相关问题
最新问题