I need to disable (not hide) a single table row in a table with at least two rows. I've been searching for how to do it, but everything I've found tells me how to hide the row. I need to actually disable it so that the result is not submitted.
I'm using a template row and cloning when users add rows. On submit, the hidden template and the rows with actual data are all submitted. The database save fails because the hidden row doesn't pass validation.
<tr class="template" style="display:none">
<!-- This is the row to be copied and unhidden to add to the table -->
<td>company</td>
<td>department</td>
<td>line</td>
<td>account</td>
</tr>
It looks to me like you are going to duplicate the table row over and over again to create the table structure with javascript or something. Options:
You could remove the row from the DOM before submission or
jQuery('tr.template').remove();
you could select all the rows except it to submit
jQuery('table tr').not('tr.template').submit();
I personally do not think it is possible to have a table without rows, perhaps you mean you want to stylise your website without using a table?
If that is the case, then if your not already, set up a css file, with this you can edit and manipulate blocks for your website. ( I would post screenshots but my reputation isn't up yet ^-^ )
Related
Here is a screenshot of a column in a website page.
It is located in that way in the website page :
As you can see, all the rows have a 'Completed' button you can pres and followed by a number of lines. These rows refer to exports. So the columnis not static and is constantly changing.
However, everytime i run the macro i want to access the first row of the column.
Here is a sample code of he HTML code of the first 'Completed' button in the screenshot above:
I have many that have the same class name. Look at the highlighted rows as an example in the picture below:
I really have no idea how to write a VBA code to always access the first 'Completed' bytton in this column.
PS: In the HTML code, in the tag "a", the onclick="....." is constantly changing. So i cannot use this as an argument to access the desired field and click on the desired button.
Please if anyone could help me figure out how to do this, i would really be happy.
Thank you :)
If you want to click the 'Completed' button in the first column, you can use the code below:
Set doc = objIE.Document
doc.getElementsByTagName("tr")(0).getElementsByTagName("td")(0).getElementsByTagName("a")(0).Click
The code get the first <tr> then get the first <td> then get <a> in it.
<tr> tags are rows, <td> tags are cells inside those rows. You did not provide enough code to show the entire table, but generally speaking to access the first row of a table, you would need to refer to the collection object and use the index number you want.
.getElementsByTagName("tr")(0)
This will refer to the first row of a table. Same with getting the first column in the first row of your table:
.getElementsByTagName("tr")(0).getElementsByTagName("td")(0)
Once you tracked down the particular cell, now you are wanting to click the link. You can use the same method as above.
.getElementsByTagName("tr")(0).getElementsByTagName("td")(0).getElementsByTagName("a")(0).Click
And a final note, the first row of a table could be a header, so you may actually want the 2nd row (1) instead.
Thanks for updating with more HTML code. I am going to slightly switch gears and use querySelector() to grab the main table.
doc.querySelector("#divPage > table.advancedSearch_table > tbody"). _
getElementsByTagName("tr")(3).getElementsByTagName("td")(3).Children(0).Click
See if this works for you.
I am using bootstrap to display and sort a table. I was wondering how/if I could implement a temporary arrow(or something) in each header in the table to indicate which direction it is being sorted.
Yes this is possible. For the header, add the following...
<table>
<thead>
<tr>
<th>Column 1 <span class="glyphicon glyphicon-sort"></th>
...
</tr>
</thead>
</table>
EDIT: I assume you actually want the icon to sort the table, as well.
This is dynamic behavior, so you won't be able to do this in pure HTML/CSS: you will need to use JavaScript. Here are the general steps that you would do to make this happen:
Store all of the table rows inside of a JavaScript variable
Inside the <th>, place another element, like a <span> or <img> that contains your arrow image.
Attach a click handler to the arrow, that sorts the array of table rows
After the array is sorted, use DOM API functions to remove the old table, create a new table, and then insert a new table in its place. Bootstrap usually is used with jQuery, so you can look at some jQuery functions to remove the table, build a new one (by going through the rows), and then render the built table to the page, in place of the old one.
There are a variety of libraries that do this, but you can accomplish it more simply by doing it yourself.
I am trying to scrape data from this webpage: http://webfund6.financialexpress.net/clients/zurichcp/PortfolioPriceTable.aspx?SchemeID=33, and I specifically need data for fund number 26.
Have no problem getting data from the first page with this address (funds number 1-25), but for the hell of me can't scrape anything from the second page. Can someone help?
Thanks!
Here is the code I use: in Google Sheets:
=IMPORTXML("http://webfund6.financialexpress.net/clients/zurichcp/PortfolioPriceTable.aspx?SchemeID=33","/html/body/form[#id='MainForm']/table/tr/td/div[#id='main']/div[#id='tabResult']/div[#id='Prices']/table/thead/tr[26]/td[#class='Center'][1]")
You can do 2 things - one is to append the PgIndex=2 onto the end of your URL, and then you can also significantly simplify your xpath to this:
//*[#id='Prices']//tr[2]/td[2]
This specifically grabs the second row on the table (tr which means table-row), in order to bypass the header row, then grabs the second field which is the table-data cell.
=IMPORTXML("http://webfund6.financialexpress.net/clients/zurichcp/PortfolioPriceTable.aspx?SchemeID=33&PgIndex=2","//*[#id='Prices']//tr[2]/td[2]")
To get the second page, add &PgIndex=2 to your url. Then adjust the /table/thead/tr[26] to /table/thead/tr[2]. The result is:
=IMPORTXML("http://webfund6.financialexpress.net/clients/zurichcp/PortfolioPriceTable.aspx?SchemeID=33&PgIndex=2","/html/body/form[#id='MainForm']/table/tr/td/div[#id='main']/div[#id='tabResult']/div[#id='Prices']/table/thead/tr[2]/td[#class='Center'][1]")
I got a table with some columns of a database record in each row. Each of these columns is editable and multiple actions can be performed on the record. This would be easy to do in HTML, just wrapping each row in a separate form.
However, it should also be possible to perform actions on multiple rows selected by checkboxes.
What is the best way to allow these single-row actions (while preferably not submitting all the other rows) and multi-row actions in the same table using HTML (preferably without js)?
Best way is to use only one form, than for each record use an array, where first coordinate is your item ID from database, as following:
<input type="checkbox" name="id[2]" />
<input type="text" name="column1[2]" />
<input type="text" name="column2[2]" />
Later on you can post the form, or serialize it and use ajax. If you do not want to use checkboxes, but to change values on the fly, than remove them (checkboxes) and insert hidden fields with old values (so you can compare). In order to detect which submit button has been used, take a look here
How about:
Have a single <form> element that wraps the entire table.
When any of the action buttons is pressed, use JavaScript to prevent default action and construct FormData dynamically (based on which button was pressed) and submit via Ajax.
The fallback (i.e. if JavaScript execution fails) submits the entire table. On the server-side, detect this case and extract the relevant data, then proceed normally (like if submitted via Ajax).
Here in table every TR having user and user data. Is this correct way of using of form for every user or one form for all users. If I am using a form for every tr, I need to create one new table, so my alignment of each column is goes off.
Here is the Html
You can use one form for the entire table. Just assign different values to name attribute of <input type="submit" /> or any other submit trigger you use.
Side note: you should avoid using table to markup non-table data. Obviously, you could use lists (unordered, ordered or definition lists) and divs/paragraphs to achieve the same result.