jQuery: как получить заголовок col и row для выбранной ячейки - PullRequest
Новая
       2

jQuery: как получить заголовок col и row для выбранной ячейки

0 голосов
/ 22 февраля 2019

В настоящее время я работаю над проектом JavaFX, у которого есть WebView.HTML-код строится строителем строк.

Я хочу получить заголовки столбцов и строк выбранной ячейки.

Они нужны мне для моего кода Java.Текущее состояние веб-страницы вы найдете в следующем примере .

Здесь код: 

$(document).ready(function() {
  $("td").click(function() {
    $("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>

CSS, который вы можете увидеть в jsfiddle

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

моя идея с 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>
0 голосов
/ 22 февраля 2019

Сложная часть - это получение заголовка столбца и заголовка строки, это можно сделать, сославшись на родительский элемент таблицы, а затем на конкретный столбец / строку выбранного элемента. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...