Develop Reference

Get selections for multiple BootstrapTable tables

i'm using wenzhixin bootstrap table, and I have a lot of tables in the same page and one button, and when the button is clicked i want to gather all the selected rows from all the different tables.
so,
in my JS code i did: (Ids is an array with all the tables IDs)
for (var i = 0; i < Ids.length; i++)
{
var domain = $.map($('#' + Ids[i] + '').bootstrapTable('getSelections'), function (row)
{
// do something with row object...
});
}
but it's not working...
please help!

it was my mistake, as some of the id's contain a vertical bar character | and it is not a valid character for id in JavaScript. the $.map function returned an error because of the id with the vertical bar.

Inserting a row cloned from one table into a specific location of another table

I have two HTML tables; a source address table and a destination address table where I want to shift rows from the source table to the destination table, and vice-versa.
It is mostly working, but I am getting stuck when inserting a row into the destination table from the source table. I do not want to append a row, as the last row in the destination table supports a text field where the user can type in an address manually. Below is the handler function for when a user clicks on a row in the source address table to remove and shift that row into the destination table:
$("#source_christmas_lights_addresses .move-row").live("click", function() {
var tr = $(this).closest("#source_christmas_lights_addresses tbody tr").remove().clone();
//The below line of code has been removed because I don't want to add my row to the end of the table.
//$("#destination_christmas_lights_addresses tbody").append(tr);
//Below here is new code added to insert a row
var tableRef = document.getElementById('destination_christmas_lights_addresses').getElementsByTagName('tbody')[0];
//Insert a row into the destination table before the end of route address.
var newRow = tableRef.insertRow(tableRef.rows.length -1);
//Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
newCell.innerHTML = "I want inner HTML from variable tr here";
});
PROBLEM 1
When I use the append function (commented out) it all works fine, except the row is at the bottom of the table which I do not want.
When I use the insertRow function, I can not work out how to move the appropriate elements of the tr variable to create a new row. I need the innerHTML because it includes code to enable the shifting of the row back into the source table.
Somebody please help?
PROBLEM 2 I am sure that the following line of code can written differently.
var tableRef = document.getElementById('destination_christmas_lights_addresses').getElementsByTagName('tbody')[0];
I thought I could use:
var tableRef = $("#destination_christmas_lights_addresses tbody");
but I can't get this to work.
Any help is appreciated.
Thanks for peoples responses. Final solution which solves both my problems is as follows.
$("#source_christmas_lights_addresses .move-row").live("click", function() {
var tr = $(this).closest("#source_christmas_lights_addresses tbody tr").remove().clone();
//reference id of element representing the row I want to add the address before.
$("#trip_planner_end_address_row").before(tr);
});

Try this
var $WhereToAppend=('#destination_christmas_lights_addresses').find('tr:first');
($tr).insertBefore($WhereToAppend);

Maybe the problem is "remove method and the clone", you should save the cloned tr in a variable for then remove the original tr.
Like this:
var tr_original = $(this).closest("#source_christmas_lights_addresses tbody tr");
var tr_cloned = tr_original.clone();
tr_original.remove();
I would like see your original sample code, so it would be easy to understand the real trouble ;)
Good luck !

Figure Out Which Merged Table Cells Would Have Been Clicked?

Is there any way to figure out which cell position is clicked if you have merged table cells? We have 20 cells etc merged together and we would like to figure out if the user has clicked on what would have been for example the 7th cell
We have merged cells which mean specific things but we now need to figure out logically which cell was clicked by a user (even though they are merged).
Is this possible?

You can judge it based on the dimensions of unmerged cells in the same table. Here is an example using jQuery (just because it's much more concise than native JS to demonstrate this point):
var $mergedTd = $('td.myMergedTd'),
$unmergedThs = $('th');
$mergedTd.click(function(e) {
var clickedUnmergedIndex = 0;
$unmergedThs.each(function(i) {
var $th = $(this);
if(e.pageX < $th.pageX + $th.width()) {
clickedUnmergedIndex = i;
} else {
// Stop iterating; we've found the unmerged index
return false;
}
});
alert('You just clicked 0-based cell index #' + clickedUnmergedIndex);
});

I would keep two copies of that table in DOM. One visible and one hidden. You take click events on the visible table, and before you merge the cells, mark the clicked cell (e.g. add a data attribute to it indicating it was marked such as data-marked='1') and copy that table to the hidden one.

Determine row and column index of input in table

I'm working on creating a javascript based spreadsheet application. Right now I can dynamically create the spreadsheet as a table with a supplied number of rows and columns and a text input in each cell as can be seen in this picture.
I'd like to have a generic event tied to all of the inputs in the table in which I am able to determine the row index and column index of the input that fired the event. Something like this:
$('.spreadsheet-cell').click(function () {
var rowIndex = $(this).attr('rowIndex');
var columnIndex = $(this).attr('columnIndex');
});
I originally tried implementing things by dynamically adding row and column index attributes to the html input element when I create it but when I add rows or columns after the original spreadsheet has been created things get messy trying to shift the value of these attributes around. I think I could make that method work if it came down to it but it seems messy and I'd prefer not to mess around so much with the DOM when I figure that there is probably some way using jQuery to determine the relative index of the parent <td> and <tr>.

Use jQuery .index. Within your function:
var rowIndex = $("#table tr").index($(this).closest('tr'));
var colIndex = $("#table td").index(this);

table cell content

my goal is to make a javascript that i will run using my browser (on someone elses site, not mine) that will take a number from thar site and wait some time depending on the number on the site before clicking a button.
the number is kind of hard to find: in this site there is a table in this table there is a table cell, i got the ID from the cell (for now lets call it "tCell") inside this cell there is another table this does not have an ID, in this table there is a row (once again no ID) in this row there is two cells, and the number is the only content of this cell.
now how do i go from that cell i have an ID on to the content i want?
(how to find the content of a cell then go to the right row of the table among this content)
i guess i will have to use something like this:
var something = document.getElementById('tCell');
and then what...

var something = document.getElementById('tCell');
var table = something.firstChild;
var tbody = table.firstChild;
var row = tbody.firstChild;
var firstTd = row.firstChild;
var secondTd = firstTd.nextSibling;
var textNode = secondTd.firstChild;
var textNodeValue = textNode.nodeValue;

document.getElementById('tCell').getElementsByTagName("table")[0].getElementsByTagName("tr")[0].getElementsByTagName("td")[1].innerHTML
Will provide you with the number, in string format.