Targeting Specific Column in Table

Targeting specific column in table

This should work (except on IE8 and below):

table.players td:nth-child(2) { width: 200px; }

Using a specific column in a Datatable

The subcategory URL ended up in the table...how would I target the other 2 to in the loop

The same way, i.e.:

foreach (DataRow row in dt.Rows)
{
html.Append("<tr>");
html.Append("<td>");
html.Append("<a target='_blank' href= " + "'" + row["subCategoryURL"].ToString() + "'" + " >");
html.Append(row["subCategoryName"].ToString());
html.Append("</a>");
html.Append("</td>");

html.Append("<td>");
html.Append(row["subCategoryDescription"].ToString());
html.Append("</td>");

html.Append("</tr>");
}

row["subCategoryName"] will get you the value of the "subCategoryName" column of the current row.

Use JavaScript to target nth column in table or nth cell of every table row

You can iterate rows and return an array of values

let tds = Array.from(rows, row => row.cells[n]);

How to target a specific column or row in CSS Grid Layout?

To style an arbitrary row, you could use a wrapper element with its display set to contents. See the code snippet below:

.grid-container {  display: grid;  grid-template-columns: repeat(5, 1fr);  grid-gap: 2px;}
.grid-item { border: 1px solid black; padding: 5px;}
.grid-row-wrapper { display: contents;}
.grid-row-wrapper > .grid-item { background: skyblue;}
<div class="grid-container">  <div class="grid-item">1</div>  <div class="grid-item">2</div>  <div class="grid-item">3</div>  <div class="grid-item">4</div>  <div class="grid-item">5</div>  <div class="grid-row-wrapper">    <div class="grid-item">6</div>    <div class="grid-item">7</div>    <div class="grid-item">8</div>    <div class="grid-item">9</div>    <div class="grid-item">10</div>  </div>  <div class="grid-item">11</div>  <div class="grid-item">12</div>  <div class="grid-item">13</div>  <div class="grid-item">14</div>  <div class="grid-item">15</div>  <div class="grid-item">16</div>  <div class="grid-item">17</div>  <div class="grid-item">18</div>  <div class="grid-item">19</div>  <div class="grid-item">20</div></div>

How can I restrict a css to particular column in datatable which has drag and drop

You can use columns.className option to assign class name to a column. If you're using ColReorder extension, class name moves with the column if it's dragged and dropped.

For example, see below how class col-name is assigned to the first column.

var table = $('#example').DataTable({
colReorder: true,
columnDefs: [
{
targets: 0,
className: 'col-name'
}
]
});

See this example for code and demonstration.

How to get a specific column value when using Datatables Selected_Row

input$foo_rows_selected stores the row index of the selected rows. To get the value of a specific column for the selected row, simply subset the data frame.

output$selected_var <- renderText({ 
master_playeridlist[input$players_rows_selected, "id"]
})


Related Topics



Leave a reply



Submit