How to create Html table in table from server side visual basic - javascript

I'm working in asp.net, visual basic.
I need to create html table inside a table.
I need to create all through server side.
The table will be with 6 cols and n rows. in the last col (more data) will be a link, and when clicking on that link (let say on row2) it will expand the specific row and show another table with 5 cols and m rows
clicking on that link again will close the row and hide the inside table.
For now I just try to do it in the client side, a little example to me, but I'm stuck.
I have this for now:
<div id="shutfuyotTable">
<table class="tblShutaf" dir="rtl" runat="server">
<thead>
<tr>
<td>num</td>
<td>name</td>
<td>sum1</td>
<td>sum2</td>
<td>notes</td>
<td>moreData</td>
</tr>
</thead>
<tbody>
<tr>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<tr>
<td colspan="5">
<table id="Table1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
<tr>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<tr>
<td colspan="5">
<table id="Table2">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</td>
</tr>
</tr>
<tr>
<td>row3</td>
<td>row3</td>
<td>row3</td>
<td>row3</td>
<td>row3</td>
<td>row3</td>
<tr>
<td colspan="5">
<table id="Table3">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</td>
</tr>
</tr>
</tbody>
</table>
</div>
In the css I put row1 (id) as display: none;
I'm not manage to do the javascript, that when I'm clicking on the link it will show or hide the table.
What do I need to add in this code (Maybe onClick function?!?)
and what I need to do in javascript?

Related

How to delete specific table rows with javascript?

How can I delete specific table rows by giving up the row number in an input field?
The table I want to target: Complete code is linked below.
<table id="uitvoertabel" border="1">
<tr>
<th></th>
<th>Voornaam</th>
<th>Achternaam</th>
<th>Aantal punten</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>Cruijff</td>
<td>54</td>
</tr>
<tr>
<td>2</td>
<td>Frans</td>
<td>Bauer</td>
<td>47</td>
</tr>
<tr>
<td>3</td>
<td>Selah</td>
<td>Sue</td>
<td>93</td>
</tr>
</table>
This is the complete code: https://jsfiddle.net/c6oLf8ye/1/

Pass the row number you want to delete like 0,1,2,3...
document.getElementById("uitvoertabel").deleteRow(0);
updated the same in: https://jsfiddle.net/3v2rdbmt/

set div full height and width in click from another div

I am loading an html file into a content div based on a click from a menu bar. The HTML contains 5 tables but for some reason the div only shows the first 5 lines of the first table, then you need a scroll bar to view the rest of the tables. I want to see all the tables on a single view and only have the scroll bars if the information exceeds the screen. Any suggestions would help. I have tried to set the width and height to 100% on the div but that did not work. When I view the table HTML alone it looks the way I want it to.
Thanks for any and all help.
function load_codes() {
document.getElementById("content").innerHTML = '<object type="text/html" data="codes2.html" ></object>';
}
function load_mrgsql() {
document.getElementById("content").innerHTML = '<object type="text/html" data="mergesqlcode.html" ></object>';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
<h2>Sidebar</h2>
<p>Open Merge Analysis WorkBook</p>
<p>
Open Merge Analysis SQL file
</p>
<p>
Common Merge Code List
</p>
<p>Merge Analysis Statistics</p>
<p>My Statistics</p>
</div>
<div id="content" style="height: auto; width:auto; min-height:100%; display: block; overflow: auto;">
<h1>Merge Analysis Tracking</h1>
<p>Welcome to the Merge Analysis Tracking Tool</p>
<p>Look around</p>
</div>
<!-- HTML with Tables (only 2 shown) -->
<body>
<table class="table">
<thead>
<tr>
<th colspan="3">Case Close Codes</th>
</tr>
</thead>
<tr>
<td>BFU</td>
<td>BIOLOGICAL FATHER UNKNOWN</td>
</tr>
<tr>
<td>DGC</td>
<td>IV-D GOOD CAUSE</td>
</tr>
<tr>
<td>DNO</td>
<td>NCP DECEASED</td>
</tr>
<tr>
<td>ERR</td>
<td>CASE ENTERED IN ERROR</td>
</tr>
<tr>
<td>FOR</td>
<td>FOREIGN</td>
</tr>
<tr>
<td>INC</td>
<td>INCARCERATED, INSTITUTIONALIZED, MEDICAL</td>
</tr>
<tr>
<td>JNC</td>
<td>INITIATING JURISDICTION NON COOPERATION</td>
</tr>
<tr>
<td>LCO</td>
<td>LOCATE ONLY</td>
</tr>
<tr>
<td>LOC</td>
<td>LOSS OF CONTACT</td>
</tr>
<tr>
<td>NCA</td>
<td>NO CURRENT ORDER/ARREARS
<$500</td>
</tr>
<tr>
<td>NCO</td>
<td>NON-COOPERATION</td>
</tr>
<tr>
<td>P21</td>
<td>PATERNITY 21</td>
</tr>
<tr>
<td>PBI</td>
<td>PATERNITY BEST INTEREST</td>
</tr>
<tr>
<td>PEX</td>
<td>PATERNITY EXCLUDED</td>
</tr>
<tr>
<td>QLO</td>
<td>QUICK LOCATE ONLY</td>
</tr>
<tr>
<td>RSC</td>
<td>RECIPIENT OF SERVICES REQUEST CLOSURE</td>
</tr>
<tr>
<td>UL1</td>
<td>UNABLE TO LOCATE 1 YEAR</td>
</tr>
<tr>
<td>UL3</td>
<td>UNABLE TO LOCATE 3 YEARS</td>
</tr>
</table>
<table class="-table">
<thead>
<tr>
<th colspan="4">Relationship Codes</th>
</tr>
</thead>
<tr>
<td>01</td>
<td>SELF</td>
</tr>
<tr>
<td>02</td>
<td>SPOUSE</td>
</tr>
<tr>
<td>05</td>
<td>CHILD</td>
</tr>
<tr>
<td>06</td>
<td>GRANDCHILD</td>
</tr>
<tr>
<td>07</td>
<td>NEPHEW OR NIECE</td>
</tr>
<tr>
<td>08</td>
<td>SIBLING</td>
</tr>
<tr>
<td>09</td>
<td>FIRST OR SECOND COUSIN</td>
</tr>
<tr>
<td>10</td>
<td>OTHER RELATIVE</td>
</tr>
<tr>
<td>13</td>
<td>UNBORN</td>
</tr>
<tr>
<td>15</td>
<td>STEP CHILD</td>
</tr>
<tr>
<td>16</td>
<td>STEP GRANDCHILD</td>
</tr>
<tr>
<td>17</td>
<td>STEP NEPHEW OR NIECE</td>
</tr>
<tr>
<td>18</td>
<td>STEP BROTHER OR SISTER</td>
</tr>
<tr>
<td>19</td>
<td>OTHER SPECIFIED RELATIVE</td>
</tr>
<tr>
<td>20</td>
<td>ATTORNEY</td>
</tr>
<tr>
<td>27</td>
<td>OTHER</td>
</tr>
<tr>
<td>28</td>
<td>FATHER</td>
</tr>
<tr>
<td>29</td>
<td>ALLEGED FATHER</td>
</tr>
<tr>
<td>30</td>
<td>STEP FATHER</td>
</tr>
<tr>
<td>31</td>
<td>GRAND FATHER</td>
</tr>
<tr>
<td>32</td>
<td>MOTHER</td>
</tr>
<tr>
<td>33</td>
<td>STEP MOTHER</td>
</tr>
<tr>
<td>34</td>
<td>GRAND MOTHER</td>
</tr>
<tr>
<td>35</td>
<td>SISTER</td>
</tr>
<tr>
<td>35</td>
<td>SISTER</td>
</tr>
<tr>
<td>36</td>
<td>AGENCY</td>
</tr>
<tr>
<td>36</td>
<td>AGENCY</td>
</tr>
<tr>
<td>37</td>
<td>AUNT</td>
</tr>
<tr>
<td>37</td>
<td>AUNT</td>
</tr>
<tr>
<td>38</td>
<td>UNCLE</td>
</tr>
<tr>
<td>38</td>
<td>UNCLE</td>
</tr>
<tr>
<td>39</td>
<td>BROTHER</td>
</tr>
<tr>
<td>39</td>
<td>BROTHER</td>
</tr>
<tr>
<td>40</td>
<td>ADOPTED CHILD</td>
</tr>
<tr>
<td>40</td>
<td>ADOPTED CHILD</td>
</tr>
<tr>
<td>99</td>
<td>UNKNOWN</td>
</tr>
<tr>
<td>99</td>
<td>UNKNOWN</td>
</tr>
</table>

If I understand your question correctly, you want to make the object have it's full height and not display scrollbars, instead of the other way around.
If so, you should be able to do something like this:
function load_codes() {
let elem = document.getElementById("content")
elem.innerHTML = '<object type="text/html" data="codes2.html" ></object>';
elem.onload = function(e) {
elem.style.height = e.contentWindow.document.body.offsetHeight;
}
}
That should get what you need. You may need to do additional css to remove the object's borders.

Rearrange table rows in hardcoded table

I am unable to edit the HTML directly in a form and would like to move some things around. I created a very simplified version of what is going on below. So for example, if I would like to move the row with class "comments" to just below the row with class "matching" how could I do this on page load?
I tried doing something like:
$('tr.comments').closest('tr').after($('tr.matching').closest('tr'));
Here is the basic code, thank you for your help!! :)
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>

Try with this $('tr.matching').after($('tr.comments'));.
$('tr.matching').after($('tr.comments'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>
</table>

$(".matching").after($(".comments"));

Selenium While Loop?

</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">test</td></tr>
</thead><tbody>
<tr>
<td>click</td>
<td>//div[#id='wrapper']/div/div/div</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[1]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[2]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[3]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[4]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
I want to click through 4 sections.
All have the same path, but not the same tablediv.
/div/div/div[2]/table/tbody/tr[1]/td
--> 1 to 4
How can I do this, thats the code are minimalize,
how can I use a while loop here?
The Code in Selenium has 18 commands..
Thanks

Since you are using Selenium IDE rather than WebDriver, the only "while" loop that you'll be able to execute is by executing plain old javascript.
<tr>
<td>store</td>
<td>iterator</td>
<td>1</td>
</tr>
<tr>
<td>storeEval</td>
<td>while (iterator <= 4) { browserBot.click("/div/div/div[2]/table/tbody/tr[1]/td[" + iterator + "]" }</td>
<td></td>
</tr>
You'll of course need to play with it, this is pseudo-code but will give a pretty decent idea of how to solve it using the IDE.

How to retrive specific row from html table equal of something by jquery

I have a table dynamically generated by php. In this table have information for different semester (such as : first, second, third etc). Now i want to show specific semester information if user click a link from same table without a query. I am newbie in this forum and its my first question. sorry for poor english. !
My code
<table id="course_offering" class="table table-striped table-hover custab ">
<thead>
<tr>
<th>Course Code</th>
<th>Course title</th>
<th>Credit Hours</th>
<th>Contact Hours</th>
<th>Pre Requisite</th>
<th>Course Type</th>
<th>Year</th>
<th>Semester</th>
<th>Offering Year</th>
<th>Offering Session</th>
</tr>
</thead>
<tbody>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>1</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2015</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
</tbody>
</table>

here is a working example:
http://jsfiddle.net/K7PjR/1/
function getRowsByText(text) {
var resultRows = $();
$('tr').each(function () {
var row = $(this);
var rowText = row.text().trim();
if (rowText === text) {
resultRows = resultRows.add(row); //return the row
}
});
return resultRows;
}
getRowsByText('apple').css('color', 'red');
getRowsByText('orange').css('color', 'orange');
HTML:
<table>
<tr>
<td>apple</td>
</tr>
<tr>
<td>orange</td>
</tr>
<tr>
<td>bannana</td>
</tr>

Categories

Resources