When a user selects a row(s) in a pageBlockTable with a checkbox (and then clicks a button) I want to be able to use jQuery (or Javascript) to populate the Account Names in another table.

Here's my code so far:

Visual Force

<apex:page id="testAllen" controller="testAllen">
	<apex:form id="theForm" >
	
		<apex:pageBlock title="Accounts" id="pageBlock">
			<table id="myTable"></table>
			<input type="button" value="Add selected to myTable"  onClick="addAccountsToMyTable()" />
			<apex:pageBlockTable value="{!DisplayAccount}" var="da" id="accountsTable">
				<apex:column >
					<apex:facet name="header">Select</apex:facet>
					<apex:inputCheckbox value="{!da.IsSelected}" />
					<apex:inputHidden value="{!da.account.Id}" id="hdnAccountId" />
				</apex:column>
				<apex:column >
					<apex:outputText value="{!da.account.Name}" />
				</apex:column>
			</apex:pageBlockTable>
		</apex:pageBlock>

		<script type="text/javascript">			
			function addAccountsToMyTable() {
				var accountsTable = $(jq("{!$Component.theForm.pageBlock.accountsTable}"));
				//TODO: need to add selected account names to myTable 
			}
			
			function jq(myid) { 
	   			return '#' + myid.replace(/(:|\.)/g,'\\\\$1');
	 		}
 	
		</script>
	</apex:form>
</apex:page>

 Apex:

public class testAllen {
	public List<DisplayAccount> DisplayAccount {get; set;}
	
	public testAllen() {
		this.DisplayAccount = new List<DisplayAccount>();
		for (Account a : [SELECT id, Name FROM Account LIMIT 20]) {
			this.DisplayAccount.add(new DisplayAccount(a));
		}
	}
	
	public class DisplayAccount {
		public boolean IsSelected {get;set;}
		public Account account {get;set;}
			
		public DisplayAccount(Account a) {
			this.account = a;
			this.IsSelected = false;
		}
	}
}

When a user selects a row(s) in a pageBlockTable with a checkbox (and then clicks a button) I want to be able to use jQuery (or Javascript) to populate the Account Names in another table.

Here's my code so far:

Visual Force

<apex:page id="testAllen" controller="testAllen">
	<apex:form id="theForm" >
	
		<apex:pageBlock title="Accounts" id="pageBlock">
			<table id="myTable"></table>
			<input type="button" value="Add selected to myTable"  onClick="addAccountsToMyTable()" />
			<apex:pageBlockTable value="{!DisplayAccount}" var="da" id="accountsTable">
				<apex:column >
					<apex:facet name="header">Select</apex:facet>
					<apex:inputCheckbox value="{!da.IsSelected}" />
					<apex:inputHidden value="{!da.account.Id}" id="hdnAccountId" />
				</apex:column>
				<apex:column >
					<apex:outputText value="{!da.account.Name}" />
				</apex:column>
			</apex:pageBlockTable>
		</apex:pageBlock>

		<script type="text/javascript">			
			function addAccountsToMyTable() {
				var accountsTable = $(jq("{!$Component.theForm.pageBlock.accountsTable}"));
				//TODO: need to add selected account names to myTable 
			}
			
			function jq(myid) { 
	   			return '#' + myid.replace(/(:|\.)/g,'\\\\$1');
	 		}
 	
		</script>
	</apex:form>
</apex:page>

 Apex:

public class testAllen {
	public List<DisplayAccount> DisplayAccount {get; set;}
	
	public testAllen() {
		this.DisplayAccount = new List<DisplayAccount>();
		for (Account a : [SELECT id, Name FROM Account LIMIT 20]) {
			this.DisplayAccount.add(new DisplayAccount(a));
		}
	}
	
	public class DisplayAccount {
		public boolean IsSelected {get;set;}
		public Account account {get;set;}
			
		public DisplayAccount(Account a) {
			this.account = a;
			this.IsSelected = false;
		}
	}
}