Develop Reference

How to reduce one column and increase other one in CSS?

I am trying to set width:13% of Date column. But it doesn't work in my way. Where is the problem? and can't reduce width of subject column. Thanks in advance.
Check FIDDLE
<div style="width:70%;float:left;">
<div>
<table style="width:100%;" class="TicketsDashboard">
<tbody>
<tr>
<td style="width:13%"><b>Date</b></td>
<td ><b>Type</b></td>
<td ><b>Subject</b></td>
<td ><b>Responsible</b></td>
<td ><b>Action</b></td>
</tr>
<tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',124)">
<td>2019-07-21 12:52:08</td>
<td>Recommendation</td>
<td>First Subject going on perfectly edited</td>
<td>perfect</td>
<td class="editButtonMain">Edit</td>
</tr>
<tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',125)">
<td>2019-07-21 12:53:26</td>
<td>Decision</td>
<td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
<td>bangldesh</td>
<td class="editButtonMain">Edit</td>
</tr>
</tbody>
</table>
</div>
<br>
<div id="ticketButtons"><input type="button" class="Btn" onclick="openDiag({function: "item", id: 155, dialogTitle: this.value})" value="Add Protocol Item"></div>
</div>
<div style="width:30%;float:left">
<table style="width:100%;" class="lightborder" id="headTable">
<tbody>
<tr id="slaTr">
<td width="100" valign="top">SLA:</td>
<td>
<div id="effortDiv" style="width:50%;float:left;text-align:center;padding-bottom:10px;display:none"></div>
<div id="timeDiv" style="text-align:center;padding-bottom:10px;display:none"></div>
</td>
</tr>
<tr>
<td width="100">Status:</td>
<td id="statusTd">Suggestion</td>
</tr>
<tr>
<td>Protocol Number:</td>
<td id="breadCrumb">PROT-155</td>
</tr>
<tr>
<td>Subject:</td>
<td id="protsubject">Chonchol -- test</td>
</tr>
<tr>
<td>Start Date:</td>
<td id="protstartdate">0000-00-00 00:00:00</td>
</tr>
<tr>
<td>End Date:</td>
<td id="protenddate">0000-00-00 00:00:00</td>
</tr>
<tr>
<td>Keeper:</td>
<td id="protkeeper">ewrwer</td>
</tr>
</tbody>
</table>
</div>

your subject column is going out because u didn't used space in this code <td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td> if you want to be stop exceeding you can give space like this <td>lklk kdj djjdjdjdjdjd jdjdjdjdjdjdjdj djjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
What actually you wanted to get let us know clearly.

To increase the width of td
instead of <td style="width:13%"> give <td style="padding-left:13%">
To avoid the overflow
add
<style>
table { table-layout:fixed; }
table td {word-wrap:break-word;}
</style>
Thanks,

the reason of it, you should set the same style for the given column in every rows, or add a thead section in which you set it once of the column.

How to find find value in table cell value with jquery

I have a table html code that comes from out source via ajax like this:
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>
I want to get value of country value in this html. Jquery nth-child can find but I could not find. I find nht tr item but can not find value ("abc") of country.

Not sure what you want to do with it, but if you want to get the second td of a tr that contains Country, use the following $("table tr:contains(Country) td:eq(1)").text()
Demo
var text = $("table tr:contains(Country) td:eq(1)").text();
console.log(text)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>

let country = document.querySelectorAll("tr")[1].querySelectorAll("td")[1].innerText;
document.querySelectorAll("tr")[1] (second tr)
.querySelectorAll("td")[1] (second td in second tr)
.innerText (gets value)

How about following selector:
$( "table.stripped tr:nth-child(2) td:nth-child(2)" ).val();

The only real reference point besides nth-child is your text headings.
Since this is the case we can just look through your table cells for the heading Date and then get the text from the following cell (that cell's index + 1).
It should be pointed out that this is less than ideal. This solution, like every other one we can offer given the circumstances, can very easily be defeated if mark-up changes in the future. Just something to keep in mind, though I do understand that sometimes you have no choice.
$("td").each(function(ind, ele) {
if(ele.textContent === "Date"){
console.log("date is", $("td").eq(ind+1).text() );
}});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>

Code: http://tpcg.io/Vy9IwJ
<script>
$(document).ready(function() {
$(".stripped td").get().forEach(function(entry, index, array) {
if ($(entry).text()=='Country') {
$('#result').html( $('#result').html()+'Country: '+$(entry).next().text() );
}
});
});
</script>
<div id="result">
</div>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>

jquery sorting with each element of itsown

So here is my Concern. I am trying to sort the data i have in the following format so that every parent elemnts has child elments and when the sort is selected for that, it should only sort its childrens
The Code for this is:
<!--- first list --->
<tr>
<td colspan="2"><li class="childrens" data-id="99" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Information</strong> [Desc] </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="81" style="margin-left:20px;"> Running </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="113" style="margin-left:40px;"> Coping</li></td>
</tr>
<tr>
<td colspan="2"><li data-id="71" style="margin-left:40px;"> Printing </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="65" style="margin-left:20px;"> references </li></td>
</tr>
<!--- Second List --->
<tr>
<td colspan="2"><li class="childrens" data-id="85" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Papers</strong> [Desc] </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="116" style="margin-left:20px;"> Opening </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="109" style="margin-left:20px;"> Closng </li></td>
</tr>
what i am trying is: when i click the desc of the first list, it should only the elements which are under the first list using data-id
same for second list ..
both lists should work independently and sorting should be on heir own, i gave a shot but not successful
here is my code
function sortdesc(){
$('li.childrens').sort(function(a,b){
return parseInt(a.getAttribute('data-id'),10)-parseInt(b.getAttribute('data-id'),10)
});
}
$(document).on('click',".sort",function(e) {
sortdesc();
});
tried here in fiddle but no luck [updated to add table to each li]
http://jsfiddle.net/HWmz3/85/

According to this answer:
function sortdesc(elem) {
// get the table of the clicked link, find its tbody
var $tbody = $(elem).closest('table').find('tbody');
// sort the tr of this tbody
$tbody.find('tr')
.sort(function(a, b) {
var a = $(a).find('li'); // get the li of a tr
var b = $(b).find('li'); // get the li of b tr
return a.data('id') < b.data('id') ? -1 : 1; // compare and return the result
})
.appendTo($tbody); // to make the sort
}
$(document).on('click', ".sort", function(e) {
// pass the link that was clicked to the function:
sortdesc(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--- first list --->
<table>
<thead>
<tr>
<td colspan="2">
<li class="childrens" data-id="99" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Information</strong> [Desc]
</li>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<li data-id="81" style="margin-left:20px;">Running</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="113" style="margin-left:40px;">Coping</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="71" style="margin-left:40px;">Printing</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="65" style="margin-left:20px;">references</li>
</td>
</tr>
</tbody>
</table>
<!--- Second List --->
<table>
<thead>
<tr>
<td colspan="2">
<li class="childrens" data-id="85" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Papers</strong> [Desc]
</li>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<li data-id="116" style="margin-left:20px;">Opening</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="109" style="margin-left:20px;">Closng</li>
</td>
</tr>
</tbody>
</table>

jQuery select various information from different <tr>

I'm working with the following HTML:
<tr class="oddrow">
<td>row1</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">-1<br>+1</td>
<td width="50%">WSH: -110<br>SAC: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">202.5</td>
<td width="50%">o: -110<br>u: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">WSH: 0<br>SAC: 0</td>
</tr>
<tr class="evenrow">
<td>row2</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">-1<br>+1</td>
<td width="50%">WSH: -110<br>SAC: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">202.5</td>
<td width="50%">o: -110<br>u: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">WSH: 0<br>SAC: 0</td>
<!-- The above line is the one I need. --!>
</tr>
There are 2 such rows (row1 and row2), alternating as an oddrow then evenrow. I have the entire HTML as a string in my JavaScript/jQuery code. I also have the information of the two three-letter abbreviations: in this example, WSH and SAC. What I need is the third <td style="text-align:center;"> of the row2 row. I should point out that there are several tables of row1 and row2 on the page, so I need a general selector. What I have been doing is just grabbing all the data in all the rows then parsing it from there, but the inconsistency of the data is making that more difficult. Is there a quick and dirty jQuery that will point me to the data I need?
I was thinking something like $("tr td:contains(" + abbrev + ") td:contains('row2')").text();, but that doesn't get it.
Can anyone help?

Your hierarchy in your selector is wrong, tds with the abbreviation are not an ancestor to the tds with the text of "row2"
You also need to ensure you have apostrophes around your abbrev variable.
Can you try:
$("tr td:contains('row2') td:contains('" + abbrev + "')").text()
Any chance you can add semantic classes instead? These sorts of selectors are gnarly to maintain.

how to find clicked tr from tbody jquery

This is my html table
<table>
<thead>
<tr>
<td class="td20"><h3>Patient Name</h3></td>
<td class="td20"><h3>Summary</h3></td>
<td class="td20"> <h3>Created</h3></td>
<td class="td20"><h3>Last visit</h3></td>
<td class="td20"> <h3>Refer to a Doctor</h3></td>
</tr>
</thead>
<tbody id="patient_table">
<tr id="1">
<td class="td20">Patient Name</td>
<td class="td20">Summary</td>
<td class="td20">Created</td>
<td class="td20">Last visit</td>
<td class="td20">Refer to a Doctor</td>
</tr>
<tr id="2">
<td class="td20">Patient Name</td>
<td class="td20">Summary</td>
<td class="td20">Created</td>
<td class="td20">Last visit</td>
<td class="td20">Refer to a Doctor</td>
</tr>
</tbody>
</table>
This is my script:
$("#patient_table").click(function(e) {
var id = $(this).children('tr').attr('id');
alert(id);
});
The <tr> is generated dynamically inside the <tbody>.
I need to find the id of <tr> on click of <tr> itself.
With the script I'm always getting the first <tr> id only irrespective of the second <tr> click.

Use this instead:
$("#patient_table").on('click','td',function (e) {
var id = $(this).closest('tr').attr('id');
alert(id);
});
jsFiddle example
Since you mentioned the rows being generated dynamically you want to use .on() to delegate the event handling to the table cells.