JQuery, Fixed header on scroll down issue in data-table - javascript

I have given data-table and trying fixed header while scroll down.
below datable displayed.
<table class="temp1 table table-striped dataTable mt-2 table-bordered" cellspacing="0" cellpadding="0" style="margin-bottom: 0px; margin-top: 0px;" role="grid"
aria-describedby="user-list-page-info" id="user-list-table">
<thead id="taablehead">
<tr class="ligth" style="margin-left: 2px;">
<th>id</th>
<th>name</th>
<th>class</th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr class="ligth">
<tr class="table-info" id="row2" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td>10001</td>
<td>karan</td>
<td>A</td>
<td></td>
<td></td>
</tr>
<tr class="table-info" id="row3" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td>10002</td>
<td>john</td>
<td>B</td>
<td></td>
<td></td>
</tr>
<tr class="table-info" id="row4" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td>10003</td>
<td>rahul</td>
<td>C</td>
<td></td>
<td></td>
</tr>
</tr>
</tbody>
i am trying to fix header on scroll down using below js but didn't work.
$(document).ready(function() {
var table = $('.temp1').DataTable({
fixedHeader: true,
scrollX: true
});
} );
but given error like Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined i have tried with datatbale js, but didn't work.


Your issue is caused by having a nested <tr>
<tbody>
<tr class='ligth'>
<tr>
Removing that (and not fixing the other typos) removes the error:
$(document).ready(function() {
var table = $('.temp1').DataTable({
fixedHeader: true,
scrollX: true
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<table class="temp1 table table-striped dataTable mt-2 table-bordered" cellspacing="0" cellpadding="0" style="margin-bottom: 0px; margin-top: 0px;" role="grid"
aria-describedby="user-list-page-info" id="user-list-table">
<thead id="taablehead">
<tr class="ligth" style="margin-left: 2px;">
<th> </th>
<th>id</th>
<th>name</th>
<th>class</th>
</tr>
</thead>
<tbody>
<tr class="table-info" id="row2" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td</td>
<td</td>
<td>10001</td>
<td>karan</td>
<td>A</td>
</tr>
<tr class="table-info" id="row2" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td</td>
<td</td>
<td>10002</td>
<td>john</td>
<td>B</td>
</tr>
<tr class="table-info" id="row2" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td</td>
<td</td>
<td>10003</td>
<td>rahul</td>
<td>C</td>
</tr>
</tbody>
</table>

Related

Add rows in a specific column in JavaScript

I have a table in HTML, which has 616 rows. However, I would like to add an extra column, and each of the rows for that column would contain the same element. Is there a way with JS to do that? What I would like to add on each row for that column is this symbol
Which is just an add button that goes in every element.
Here is my code:
<div class="scrollingTable">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-8 mb-8">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable" cellspacing="0" cellpadding="1" border="1" width="300">
<thead>
<tr>
<th title="Field #1">drinkName</th>
<th title="Field #2">drinkSizeInFlOz</th>
<th title="Field #3">calories</th>
<th title="Field #4">caffeineInMg</th>
<th title="Field #5">caffeineInMgPerFloz</th>
<th title="Field #6">type</th>
</tr>
</thead>
<tbody>
<tr>
<td>28 Black Energy Drink</td>
<td>8.46</td>
<td align="right">125</td>
<td align="right">80</td>
<td align="right">9.5</td>
<td>ED</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>3 Water </td>
<td>16.9</td>
<td align="right">0</td>
<td align="right">50</td>
<td align="right">3.0</td>
<td>W</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>3D Energy Drink</td>
<td>16</td>
<td align="right">15</td>
<td align="right">200</td>
<td align="right">12.5</td>
<td>ED</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>4 Purpose Energy Drink</td>
<td>8.46</td>
<td align="right">70</td>
<td align="right">70</td>
<td align="right">8.3</td>
<td>ED</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>4C Energy Drink Mix</td>
<td>16.9</td>
<td align="right">15</td>
<td align="right">170</td>
<td align="right">10.1</td>
<td>ED</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>5 Hour Energy</td>
<td>1.93</td>
<td align="right">4</td>
<td align="right">200</td>
<td align="right">103.6</td>
<td>ES</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>
<td>5 Hour Energy Extra Strength</td>
<td>1.93</td>
<td align="right">0</td>
<td align="right">230</td>
<td align="right">119.2</td>
<td>ES</td>
<td><button type="submit" id="myButton">+</button></td>
</tr>
<tr>

I created the jsfiddle for your problem.
var trs = document.querySelectorAll("#myTable tbody tr");
for (var tr of trs) {
let td = document.createElement("td");
let btn = document.createElement("button");
btn.innerHTML = "+";
btn.type = "submit";
td.appendChild(btn);
tr.appendChild(td);
}
<html>
<body>
<div class="scrollingTable">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-8 mb-8" >
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name" >
<table id="myTable" cellspacing="0" cellpadding="1" border="1" width="300">
<thead>
<tr>
<th title="Field #1">drinkName</th>
<th title="Field #2">drinkSizeInFlOz</th>
<th title="Field #3">calories</th>
<th title="Field #4">caffeineInMg</th>
<th title="Field #5">caffeineInMgPerFloz</th>
<th title="Field #6">type</th>
</tr>
</thead>
<tbody>
<tr>
<td>28 Black Energy Drink</td>
<td>8.46</td>
<td align="right">125</td>
<td align="right">80</td>
<td align="right">9.5</td>
<td>ED</td>
</tr>
<tr>
<td>3 Water </td>
<td>16.9</td>
<td align="right">0</td>
<td align="right">50</td>
<td align="right">3.0</td>
<td>W</td>
</tr>
<tr>
<td>3D Energy Drink</td>
<td>16</td>
<td align="right">15</td>
<td align="right">200</td>
<td align="right">12.5</td>
<td>ED</td>
</tr>
<tr>
<td>4 Purpose Energy Drink</td>
<td>8.46</td>
<td align="right">70</td>
<td align="right">70</td>
<td align="right">8.3</td>
<td>ED</td>
</tr>
<tr>
<td>4C Energy Drink Mix</td>
<td>16.9</td>
<td align="right">15</td>
<td align="right">170</td>
<td align="right">10.1</td>
<td>ED</td>
</tr>
<tr>
<td>5 Hour Energy</td>
<td>1.93</td>
<td align="right">4</td>
<td align="right">200</td>
<td align="right">103.6</td>
<td>ES</td>
</tr>
<tr>
<td>5 Hour Energy Extra Strength</td>
<td>1.93</td>
<td align="right">0</td>
<td align="right">230</td>
<td align="right">119.2</td>
<td>ES</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

There are a lot of ways to insert a column into each row of a table.
It all depends on what libraries you are using.
I will assume that you are using vanilla Javascript, (i.e: no external libraries).
Here is one way to insert a column, and control the content of each cell,
including detecting if you are currently on the table header, or normal cell.
const btn = document.getElementById('my-button');
btn.addEventListener('click', function(){
const tr = document.querySelectorAll('#my-table tr');
tr.forEach((row,index) => {
let cell;
if(index===0) {
cell = document.createElement('th');
cell.innerText = "fourth column";
} else {
cell = document.createElement('td');
cell.innerText = `row ${index},4`;
}
row.appendChild(cell);
});
});
table, td, th
{
border: 1px solid grey;
border-collapse: collapse;
}
td, th
{
padding: 1em;
}
button
{
margin-top: 2em;
}
<button id="my-button">Insert missing column</button>
<table id="my-table">
<thead>
<tr>
<th>first column</th>
<th>second column</th>
<th>third column</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1, 1</td>
<td>row 1, 2</td>
<td>row 1, 3</td>
</tr>
<tr>
<td>row 2, 1</td>
<td>row 2, 2</td>
<td>row 2, 3</td>
</tr>
<tr>
<td>row 3, 1</td>
<td>row 3, 2</td>
<td>row 3, 3</td>
</tr>
</tbody>
</table>

const rows = document.getElementsByTagName("table")[0].rows; //Get all rows
for (let i = 1; i < rows.length; i++) { // Iterate rows of body
const row = rows[i]; // Get row
const button = document.createElement("button"); // Create button
button.innerHTML = "+"; // Set text of button
const cell = document.createElement("td"); // Create column
cell.appendChild(button); // Add button to column
row.appendChild(cell); // Add column to row
}
<div class="scrollingTable">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-8 mb-8">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable" cellspacing="0" cellpadding="1" border="1" width="300">
<thead>
<tr>
<th title="Field #1">drinkName</th>
<th title="Field #2">drinkSizeInFlOz</th>
<th title="Field #3">calories</th>
<th title="Field #4">caffeineInMg</th>
<th title="Field #5">caffeineInMgPerFloz</th>
<th title="Field #6">type</th>
</tr>
</thead>
<tbody>
<tr>
<td>28 Black Energy Drink</td>
<td>8.46</td>
<td align="right">125</td>
<td align="right">80</td>
<td align="right">9.5</td>
<td>ED</td>
</tr>
<tr>
<td>3 Water </td>
<td>16.9</td>
<td align="right">0</td>
<td align="right">50</td>
<td align="right">3.0</td>
<td>W</td>
</tr>
<tr>
<td>3D Energy Drink</td>
<td>16</td>
<td align="right">15</td>
<td align="right">200</td>
<td align="right">12.5</td>
<td>ED</td>
</tr>
<tr>
<td>4 Purpose Energy Drink</td>
<td>8.46</td>
<td align="right">70</td>
<td align="right">70</td>
<td align="right">8.3</td>
<td>ED</td>
</tr>
<tr>
<td>4C Energy Drink Mix</td>
<td>16.9</td>
<td align="right">15</td>
<td align="right">170</td>
<td align="right">10.1</td>
<td>ED</td>
</tr>
<tr>
<td>5 Hour Energy</td>
<td>1.93</td>
<td align="right">4</td>
<td align="right">200</td>
<td align="right">103.6</td>
<td>ES</td>
</tr>
<tr>
<td>5 Hour Energy Extra Strength</td>
<td>1.93</td>
<td align="right">0</td>
<td align="right">230</td>
<td align="right">119.2</td>
<td>ES</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

IMPORTANT!
#IDs ARE UNIQUE!
Do not have more than one of the same #id on a page because it's:
invalid HTML
semantically gross
behavior becomes unpredictable
JavaScript if not immediately but eventually break
the terrorists win
There's like a ton of these in OP:
<button type="submit" id="myButton">+</button> <!--👎-->
Try to avoid using #id at all -- use .class instead.
In the example below the function insertCol() is versatile and reusable. The <table> has a <tfoot> for demonstration purposes. Details are commented in the example.
// This object stores content for insertCol() to fill a table
let content = {
cap: {
text: 'TEXT',
side: '',
act: 0 // 1='use data' 0='skip data'
},
tH: {
th: 'tH',
act: 0
},
tB: {
th: '',
td: `<td><button class="btn btn-sm btn-info add">âž•</button></td>`,
act: 1
},
tF: {
td: 'tF',
act: 0
}
};
/**
* #desc - Inserts a column into a given table
* #param {number} index - Index to inert new column at
* #param {object} content - Object that stores content
* #param {string<selector>} selector - CSS Selector of a
* tag if undefined #default is "table"
*/
function insertCol(index, content, selector = 'table') {
// Reference <table>
const table = document.querySelector(selector);
// Collect all <tr> into an array
const rowArray = [...table.rows];
let cols = rowArray[0].cells.length;
let size = rowArray.length;
//console.log(size);
//console.log(cols);
/*
If content.tB is active (1)...
... .foreach() <tr> add <td> and content at the index
*/
if (content.tB.act) {
rowArray.forEach(tr => {
tr.insertCell(index).innerHTML = content.tB.td;
});
}
/*
If there's a <thead> AND content.tH.act === 1...
... .removeCell() at index...
... add <th> with content
*/
if (table.tHead && content.tH.act) {
rowArray[0].deleteCell(index);
rowArray[0].insertCell(index).outerHTML = `<th>${content.tH.th}</th>`;
}
// The same as above for <tfoot>
if (table.tFoot && content.tF.act) {
rowArray[size - 1].deleteCell(index);
rowArray[size - 1].insertCell(index).innerHTML = content.tF.td;
}
// This block is for <caption>
if (table.caption && content.cap.act) {
table.caption.innerHTML = content.cap.text;
table.caption.style.captionSide = content.cap.side;
}
}
// -1 is the index after the last index
insertCol(-1, content);
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style></style>
</head>
<body>
<main class="container scrollingTable">
<section class="row justify-content-center">
<div class="col-md-8 col-lg-8 mb-8">
<label class='form-label' for='search'>Search</label>
<input id="search" class='form-control mb-2' type="text" placeholder="Search for names..">
<table class='table table-striped table-hover'>
<caption></caption>
<thead>
<tr>
<th title="Field #1">drinkName</th>
<th title="Field #2">drinkSizeInFlOz</th>
<th title="Field #3">calories</th>
<th title="Field #4">caffeineInMg</th>
<th title="Field #5">caffeineInMgPerFloz</th>
<th title="Field #6">type</th>
</tr>
</thead>
<tbody>
<tr>
<td>28 Black Energy Drink</td>
<td>8.46</td>
<td>125</td>
<td>80</td>
<td>9.5</td>
<td>ED</td>
</tr>
<tr>
<td>3 Water </td>
<td>16.9</td>
<td>0</td>
<td>50</td>
<td>3.0</td>
<td>W</td>
</tr>
<tr>
<td>3D Energy Drink</td>
<td>16</td>
<td>15</td>
<td>200</td>
<td>12.5</td>
<td>ED</td>
</tr>
<tr>
<td>4 Purpose Energy Drink</td>
<td>8.46</td>
<td>70</td>
<td>70</td>
<td>8.3</td>
<td>ED</td>
</tr>
<tr>
<td>4C Energy Drink Mix</td>
<td>16.9</td>
<td>15</td>
<td>170</td>
<td>10.1</td>
<td>ED</td>
</tr>
<tr>
<td>5 Hour Energy</td>
<td>1.93</td>
<td>4</td>
<td>200</td>
<td>103.6</td>
<td>ES</td>
</tr>
<tr>
<td>5 Hour Energy Extra Strength</td>
<td>1.93</td>
<td>0</td>
<td>230</td>
<td>119.2</td>
<td>ES</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>FOOT</td>
<td>FOOT</td>
<td>FOOT</td>
<td>FOOT</td>
<td>FOOT</td>
<td>FOOT</td>
</tr>
</tfoot>
</table>
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script></script>
</body>
</html>

Moving table rows from one table to another using Javascript

I've got 2 tables that I'm trying to shift rows between in HTML using JavaScript, but I'm not having much luck at the moment. I've tried plenty of solutions from here but none of them seem to be working for me at the moment!
Currently my HTML code is as per below
.container {
overflow: hidden
}
.tab {
float: left
}
.tab-btn {
margin: 50px
}
button {
display: block;
margin-bottom: 20px
}
<div class="container-fluid">
<div class="card-deck">
<div class="card">
<div class="card-body">
<h5 class="card-title">Manage Schools</h5>
<div class="container">
<div class="tab">
<table class="table table-sm table-hover" id="table1">
<tr>
<th>School ID</th>
<th>School Name</th>
<th>Select</th>
</tr>
<tr>
<td>1</td>
<td>School A</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>2</td>
<td>School B</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>3</td>
<td>School C</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>4</td>
<td>School D</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>5</td>
<td>School E</td>
<td>
<input type="checkbox" "></td>
</tr>
<tr>
<td>6</td>
<td>School F</td>
<td><input type="checkbox "></td>
</tr>
</table>
</div>
<div class="tab tab-btn ">
<button>Add</button>
<button>Remove</button>
</div>
<div class="tab ">
<table class="table table-sm table-hover " id="table2 ">
<tr>
<th>School ID</th>
<th>School Name</th>
<th>Select</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Ideally, once a row has been shifted from table1 to the table2, it can then be removed from the table2 using the remove button. Also being able to select multiple rows and moving them at the same time would be a huge advantage.
Any and all help with the JavaScript would be very much appreciated!

Vue - Add elements outside of the loop

I am looping over a table row, but each of the table rows should have another table row attached to it in which other data from the loop should appear. I am unable to somehow insert
<tr class="data-spacer"></tr>
<tr>
<td class="additional-data" colspan="3">Subjects: </td>
<td class="additional-data" colspan="5">Classes: </td>
</tr>
<tr class="spacer"></tr>
after each looped row. I tried also just looping those elements for themselves as well, but they just get stacked after the first row's loop has produced all it's children, so the attached tr just gets stacked under the last one of the first loop's children.
Is there any way to overcome this? I really need to use a table for this.
<table>
<tr>
<th>Photo</th>
<th>First name</th>
<th>Last name</th>
<th>Username</th>
<th>Email</th>
<th>Phone number</th>
<th>Class</th>
<th>Subjects</th>
<th>Classes</th>
<th>Operation</th>
</tr>
<tr v-for="(teacher, i) in teachers" :key="i">
<td><img id="profilePhoto" src="../../../assets/default_pic/user_green.svg" alt="profile-photo"></td>
<td><input type="text" v-model="teacher.firstName"></td>
<td><input type="text" v-model="teacher.lastName"></td>
<td><input type="text" v-model="teacher.username"></td>
<td><input type="text" v-model="teacher.email"></td>
<td><input type="text" v-model="teacher.phoneNumber"></td>
<td><span>F12</span></td>
<td><span></span></td>
<td><span></span></td>
<td></td>
</tr>
<tr class="data-spacer"></tr>
<tr>
<td class="additional-data" colspan="3">Subjects: </td>
<td class="additional-data" colspan="5">Classes: </td>
</tr>
<tr class="spacer"></tr>
</table>

Added fixes to the above code. Try this one
<table>
<thead>
<tr>
<th>Photo</th>
<th>First name</th>
<th>Last name</th>
<th>Username</th>
<th>Email</th>
<th>Phone number</th>
<th>Class</th>
<th>Subjects</th>
<th>Classes</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<template v-for="(teacher, i) in teachers" :key="i">
<tr>
<td><img id="profilePhoto" src="../../../assets/default_pic/user_green.svg" alt="profile-photo"></td>
<td><input type="text" v-model="teacher.firstName"></td>
<td><input type="text" v-model="teacher.lastName"></td>
<td><input type="text" v-model="teacher.username"></td>
<td><input type="text" v-model="teacher.email"></td>
<td><input type="text" v-model="teacher.phoneNumber"></td>
<td><span>F12</span></td>
<td><span></span></td>
<td><span></span></td>
<td></td>
</tr>
</template>
<tr class="data-spacer"></tr>
<tr>
<td class="additional-data" colspan="3">Subjects: </td>
<td class="additional-data" colspan="5">Classes: </td>
</tr>
<tr class="spacer"></tr>
</tbody>
</table>

Checked in table html

$(function() {
$('.sus').click(function(e) {
if($(".case").is(":checked")){
for (var i = Things.length; i >= 0; i++) {
Things[i]
}
alert("checkeado");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-success sus">Success</button>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Checkbox</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
I'm trying to make ckecked to be showing me the first name of which is ckecked.
As shown in the picture
Or make a for which to cross the table and show me the ones that are checked
enter image description here

This should work for you. You will need to remove the extra comma (,) at the end.
$(function() {
$('.sus').click(function(e) {
var checkedNames = '';
var $things = $('.case:checked');
if($things.length > 0){
for (var i = 0; i < $things.length; i++) {
checkedNames += $($things[i]).closest('tr').find('td:first').text() + ',';
}
alert("checkeado " + checkedNames);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-success sus">Success</button>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Checkbox</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>

Update text inside td

The code below is executed using server push:
$('tr[name=' + device + ']').find("td[id='status']").text('STARTED');
when I try to access the id of the element it gives proper result
$('tr[name=' + device + ']').find("td[id='status']").attr('id'); // works for me
but when I try to update the text using html or text it doesn't work.
HTML:
<table class="table table-bordered table-condensed cf">
<thead class="cf">
<tr>
.........
................
</tr>
</thead>
<tbody>
<tr id="car0" name="5" class="redRow">
<td>.....</td>
<td>.....</td>
<td>.....</td>
<td>......</td>
<td id="5status">......</td>
<td>.....</td>
<td>.....</td>
<td>........</td>
</tr>
<tr id="car2" name="8" class="redRow">
<td> ....</td>
<td>......</td>
<td>......</td>
<td>......</td>
<td id="6status">0 km/h</td>
<td>........</td>
<td>..........</td>
<td>..........</td>
</tr>
</tbody>
</table>
I even tried $('#6status').text('STARTED'); but doesn't work.

Your td element have numbers before substring status.
So use selector to get element contains substring status.
Read more about this selector here
Solution:
$('tr[name=' + device + ']').find("td[id*='status']").text('STARTED');
Example:
$(function() {
var device = '8';
$('tr[name=' + device + ']').find("td[id*='status']").text('STARTED');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-condensed cf">
<thead class="cf">
<tr>
.........
................
</tr>
</thead>
<tbody>
<tr id="car0" name="5" class="redRow">
<td>.....</td>
<td>.....</td>
<td>.....</td>
<td>......</td>
<td id="5status">......</td>
<td>.....</td>
<td>.....</td>
<td>........</td>
</tr>
<tr id="car2" name="8" class="redRow">
<td> ....</td>
<td>......</td>
<td>......</td>
<td>......</td>
<td id="6status">0 km/h</td>
<td>........</td>
<td>..........</td>
<td>..........</td>
</tr>
</tbody>
</table>

Categories

Resources