I have one table, in this table two columns and 5 rows are there. In First column have a check box and second column have a data. I want get the second column row value of checked items.
My table id was "tb1", checkbox id "cb1" and second field id "da1".
I want the result like "Data2 and Data5" That means whatever I check, that particular second column(<td>) value.
This is possible, please help me.
If you are using cb2 and da2 for row two, then in javascript you could do:
If data column is td element only:
document.getElementById("da2").innerText
If data column is input element:
document.getElementById("da2").value;
JS Bin
Bind the event on every checkbox and the find second field" with the help of closest
JavaScript
$(function(){
$("#tb1").on('click','input',function(){
var value =($(this).closest('tr').find('[id^=da]').text())
alert(value)
})
})
HTML
<table id="tb1" cellpadding="5" border="1" cellspacing='0' width="200">
<tr>
<td id="cb1"><input type='checkbox' /> </td>
<td id="da1">Data 1</td>
</tr>
<tr>
<td id="cb2"><input type='checkbox' /> </td>
<td id="da2">Data 2</td>
</tr>
<tr>
<td id="cb3"><input type='checkbox' /> </td>
<td id="da3">Data 3</td>
</tr>
<tr>
<td id="cb4"><input type='checkbox' /> </td>
<td id="da4">Data 4</td>
</tr>
</table>
Related
What would be the best way to dynamically add an HTML element, such as another column onto a basic HTML table?
I want to have a button below the table, and if the user were to click the button, the event would add the same amount of rows already in the table and add another column. I would want to support about 5 extra columns being added to the table.
Here's my HTML table as of right now:
<table>
<thead>
<tr>
<th id="row-tag"></th>
<th id="option-column">Option 1</th>
</tr>
</thead>
<tbody>
<tr>
<td id="row-tag">P</td>
<td id="option-column">{{ p }}</td>
</tr>
<tr id="row-tag">
<td>
<app-a-p (saveButtonClick)="toggleAP($event)"
[modModalValues]="modModalValues">
</app-a-p>
</td>
<td id="option-column">
<div class="input-group input-group-sm">
$<input
*ngIf="toggleAP==true"
type="text"
name="aP"
size="10"
disabled
value=""
/>
<input
*ngIf="toggleAP==false"
type="text"
name="aP"
size="10"
[ngModel]="con.pA"
(ngModelChange)="con.pA = $event" appFormatP
(blur)="checkAP($event.target.value);
inputTracker.addModifiedValue('Option 1', $event.target.value)"
/>
</div>
</td>
</tr>
<tr>
<td id="row-tag">L</td>
<td id="option-column">${{l}}</td>
</tr>
<tr>
<td id="row-tag">R</td>
<td id="option-column">${{r}}</td>
</tr>
</tbody>
</table>
I think in Angular, you define table based on your data. for example, you have fields array defining columns, and data array defines the what's actually in the table.
<table >
<thead>
<tr>
<th *ngFor='let key of this.fields'>{{key}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let row of this.data ' >
<td scope="row" *ngFor='let key of this.fields'> {{row[key]}} </td>
</tr>
</tbody>
</table>
when you need a new column, just push a new field into fields. like
fields.push('newcolumn');
when you need a new row, just do:
data.push({col1: '', col2:'', newcolumn: ''});
Look into the insertRow() and insertCell() functions in JavaScript. This alongside an onClick function that you write will let you edit the table.
A good way of generating a table on UI when using angular would be to use 2D-array (row*column) use can have a button using which you can dynamically add values to this array and have another row/column to the table.
I need to display 2 empty table row when don't have any data and when they do have data those 2 empty table rows should be hidden. Now i can write the code for display data in the table rows but it doesn't display 2 empty table rows when it doesn't have data, so please help me to solve this problem. thank you.
<table class="message_table" width="1025" border="0" cellspacing="1" cellpadding="5" align="center" bgcolor="#c9c9c9">
<tr style="background-color:#797a7b;">
<td style="color:#fff;">序号</td>
<td style="color:#fff;">模式</td>
<td style="color:#fff;">时时彩返点</td>
<td style="color:#fff;">11选5返点</td>
<td style="color:#fff;">低频返点</td>
<td style="color:#fff;">操作</td>
</tr>
<a4j:repeat value="#{AgentAutoRegBean.reslist}" var="list"
id="dblist" rowKeyVar="keys">
<tr style="background:#{keys%2==1?'#EEEEDD':'#f4f4f4'}">
<td>#{keys+1}</td>
<td>#{list.model}</td>
<td>
<h:outputText value="#{list.pointssc}" converter="PercentConverter"/>
</td>
<td>
<h:outputText value="#{list.point115}" converter="PercentConverter"/>
</td>
<td>
<h:outputText value="#{list.pointdp}" converter="PercentConverter"/>
</td>
<td>
<font color="#5a5a5a">
<a4j:commandLink value="编辑" status="normalStatus" action="#{AgentAutoRegBean.edit}" data="#{AgentAutoRegBean.msg}" oncomplete="edit01(data)">
<f:param name="sign" value="#{list.sign}"/>
</a4j:commandLink>
<rich:spacer width="8"></rich:spacer>
<a4j:commandLink value="网址" onclick="winopen('#{list.sign}');return false;">
</a4j:commandLink>
</font>
</td>
</tr>
</a4j:repeat>
</table>
If you want to fill it later you have to use the var attribute of the a4j:repeat and prepare a list with 2 (empty) elements in the backing bean before access the data and use listeners for fill the list later.
I want to create a table like:
T1----T2----T3
--------------
B1
A1 B2 C1
B3
I'm using the following code:
<table class="table">
<thead>
<tr>
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">A1</td>
<tr>
<td>B1</td>
<tr>
<td>B2</td>
</tr>
<td>C1</td>
</tr>
</tbody>
</table>
Demo: https://jsfiddle.net/90yegr6f/
I have problems with C1. How to solve this?
You need to focus on doing things one row at a time. Deal with everything in the first row. Then start a new row and deal with everything in that.
So the first row contains A1, B1 and C1.
<tr>
<td>A1
<td>B1
<td>C1
The second row contains only B2
<tr>
<td>B2
and so on.
Now, you want the first and last cells of the first row to span multiple rows:
<tr>
<td rowspan=3>A1
<td>B1
<td rowspan=3>C1
Which gives you:
<table class=table>
<thead>
<tr>
<th>T1
<th>T2
<th>T3
<tbody>
<tr>
<td rowspan=3>A1
<td>B1
<td rowspan=3>C1
<tr>
<td>B2
<tr>
<td>B3
</table>
I have a main table and then insert sub tables each td. Like below The problem is lets say I have:
<table id = "main>
<tr>
<th id = "header1">blah</td>
<th id = "header2">blah</td>
<th id = "header3">blah</td>
</tr>
<tr><td>
<table id = "sub1">
<tr><td headers='header1'>1</td></tr>
</table>
</td>
<td>
<table id = "sub2">
<tr><td headers='header2'>2</td></tr>
</table>
</td>
<td>
<table id = "sub3">
<tr><td headers='header3'>3</td></tr>
</table>
</td>
</tr>
</table>
now if sub1 has only 4 rows in it but sub 2 and 3 each have 100 rows the table keeps putting sub1 table in the middle of the rest of the table. How would i stop it from doing that?
Try this:
<td valign="top">
You have to specify, where to align the content of td
Look in to valign
<td valign='top'>
Updated source
<table id = "main>
<tr>
<th id = "header1">blah</td>
<th id = "header2">blah</td>
<th id = "header3">blah</td>
</tr>
<tr><td valign='top'>
<table id = "sub1">
<tr><td headers='header1'>1</td></tr>
</table>
</td>
<td>
<table id = "sub2">
<tr><td headers='header2'>2</td></tr>
</table>
</td>
<td>
<table id = "sub3">
<tr><td headers='header3'>3</td></tr>
</table>
</td>
</tr>
</table>
If you are increasing/decreasing the no. of rows/cols in your tables, you may need to adust the same through rowspan and colspan properties. Also displaying text at the top of any cell needs valign="top" property
Make the second table row (after the header row) opening tag <tr style="vertical-align:top">. That will work and there is no need for rowspan or colspan.
I want to validate my page but w3c keeps giving me this warning. I want to get rid of it but I can't seem to find the cause of it.
It gives me this error:
A table row was 2 columns wide and exceeded the column count established by the first row (1).
Table and CSS code:
<table>
<tr>
<td>Contact informatie</td>
<tr>
<td>Adres:</td>
<td>Jan van der Heydenstraat 61</td>
<tr>
<td>Postcode:</td>
<td>1223 BG</td>
<tr>
<td>Plaats:</td>
<td>Hilversum</td>
<tr>
<td>Email:</td>
<td>info#blabla.nl</td>
<tr>
<td>Telefoon:</td>
<td>06-31903706</td>
</tr>
</table>
table {
border:none;
padding-left:75px;}
td:first-child {
width:135px;
border:none;
text-align:left;}
td+td {
border:none;
text-align: left;}
Anyone any suggestions?
It means exactly what it says. One of the rows in your table has too many columns. Specifically, the first row has less columns that a subsequent row. But we can't do much unless you post some code.
Edit
The markup for the table is incorrect.
You only have one cell in the first row (or do what PeeHaa suggested)
You need to close off each row with </tr>
Just change this:
<tr>
<td>Contact informatie</td>
</tr>
To this:
<tr>
<td colspan="2">Contact informatie</td>
</tr>
YOu should always close you tablerows (tr): </tr>.
Final version:
<table>
<tr>
<td colspan="2">Contact informatie</td>
</tr>
<tr>
<td>Adres:</td>
<td>Jan van der Heydenstraat 61</td>
</tr>
<tr>
<td>Postcode:</td>
<td>1223 BG</td>
</tr>
<tr>
<td>Plaats:</td>
<td>Hilversum</td>
</tr>
<tr>
<td>Email:</td>
<td>info#vazcreations.nl</td>
</tr>
<tr>
<td>Telefoon:</td>
<td>06-31903706</td>
</tr>
</table>
In extension to what SimpleCoder said, if you have the first row of a table have only one column, then the futher ones can have no more then one column. If you want to get around this you need to put a table inside the cell i.e.
<td>
<table>
<tr>
<td><!-- Content here --></td>
</tr>
</table>
</td>