asked on

switch all instances with a table tr

Assuming a table row, how can I switch out a value for another throughout all the elements contained within that row id, name, class, ...

To simplify the example, I have a value of format

w-x-y-z

where w & z are constant and know, but the x & y are wrong. Now I can determine the proper x & y, but need to now update value throughout all the row elements wherever it may be used (I know it is used in id, name, class).

Here's a concrete example

<tr class="item-phone">
	<td style="width: 25px;">
		<button type="button" class="remove-phone btn btn-danger btn-xs table-control">
			<i class="glyphicon glyphicon-minus"></i>
		</button>
	</td>
	<td style="width: 225px;">
		<div class="table-control field-clientscontactsphones-0-0-phone required has-error">
			<input type="text" id="clientscontactsphones-0-0-phone" class="form-control" name="ClientsContactsPhones[0][0][Phone]" aria-invalid="true">
			<div class="help-block"></div>
		</div>
	</td>
	<td style="width: 60px;">
		<div class="table-control field-clientscontactsphones-0-0-phoneext">
			<input type="text" id="clientscontactsphones-0-0-phoneext" class="form-control" name="ClientsContactsPhones[0][0][PhoneExt]">
			<div class="help-block"></div>
		</div>
	</td>
	<td style="width: 175px;">
		<div class="table-control field-clientscontactsphones-0-0-phonetypeid">
			<select id="clientscontactsphones-0-0-phonetypeid" class="form-control" name="ClientsContactsPhones[0][0][PhoneTypeId]">
				<option value="">Select a Phone Type ...</option>
				<option value="2">Cell</option>
				<option value="1">Home</option>
				<option value="3">Work</option>
			</select>
			<div class="help-block"></div>
		</div>
	</td>
</tr>

Open in new window

and I'd need to switch any mention of clientscontactsphones-0-0-phone to clientscontactsphones-5-3-phone. This would include field-clientscontactsphones-0-0-phone to field-clientscontactsphones-5-3-phone, as well as ClientsContactsPhones[0][0][Phone] to ClientsContactsPhones[5][3][Phone], etc...

Thank you for your help!

Norie

Daniel

Which attributes would be changing?

Daniel Pineault

ASKER

All of them.

My desired final output based on the above original source assuming I want x = 5 and y =3 would be

<tr class="item-phone">
	<td style="width: 25px;">
		<button type="button" class="remove-phone btn btn-danger btn-xs table-control">
			<i class="glyphicon glyphicon-minus"></i>
		</button>
	</td>
	<td style="width: 225px;">
		<div class="table-control field-clientscontactsphones-5-3-phone required has-error">
			<input type="text" id="clientscontactsphones-5-3-phone" class="form-control" name="ClientsContactsPhones[5][3][Phone]" aria-invalid="true">
			<div class="help-block"></div>
		</div>
	</td>
	<td style="width: 60px;">
		<div class="table-control field-clientscontactsphones-5-3-phoneext">
			<input type="text" id="clientscontactsphones-5-3-phoneext" class="form-control" name="ClientsContactsPhones[5][3][PhoneExt]">
			<div class="help-block"></div>
		</div>
	</td>
	<td style="width: 175px;">
		<div class="table-control field-clientscontactsphones-5-3-phonetypeid">
			<select id="clientscontactsphones-5-3-phonetypeid" class="form-control" name="ClientsContactsPhones[5][3][PhoneTypeId]">
				<option value="">Select a Phone Type ...</option>
				<option value="2">Cell</option>
				<option value="1">Home</option>
				<option value="3">Work</option>
			</select>
			<div class="help-block"></div>
		</div>
	</td>
</tr>

Open in new window

I have the beginning of a function to determine the x and y values. item, in this function is actually the row that needs updating.

function(e, item) {
        var y= item.rowIndex;   
        var phoneTable = item.closest('table');
        var contactsTr = phoneTable.closest('tr');
        var x= contactsTr.rowIndex - 1;

        //switch item x and y value based on the x and y found in this function
}

Open in new window

Also note the original name will not necessarily be clientscontactsphones-0-0-phoneex, not necessarily 0s could be any number.

clientscontactsphones-0-7-phoneex
clientscontactsphones-15-03-phoneex
clientscontactsphones-2-1-phoneex
clientscontactsphones-3-3-phoneex
...

Daniel Pineault

ASKER

Norie,

Not pretty, but this is what I've come up with which seems to work (more testing to be done).

function(e, item) {
        var newRowNo = item.rowIndex;   // y
        var phoneTable = item.closest('table');
        var contactsTr = phoneTable.closest('tr');
        var contactsTrNo = contactsTr.rowIndex - 1; //table has header - x

        var existingInput = $(item).find("[id $='-phone']");
        var existingX = existingInput.attr('id').split("-")[1];
        var existingY = existingInput.attr('id').split("-")[2]; 

        var phoneEle = $('#clientscontactsphones-'+existingX+'-'+existingY+'-phone')
        phoneEle.attr('id','clientscontactsphones-'+contactsTrNo+'-'+newRowNo+'-phone');
        phoneEle.attr('name','ClientsContactsPhones['+contactsTrNo+']['+newRowNo+'][Phone]');
        phoneEle.parent().closest('div').removeClass('field-clientscontactsphones-'+existingX+'-'+existingY+'-phone').addClass('field-clientscontactsphones-'+contactsTrNo+'-'+newRowNo+'-phone');

        var extEle = $('#clientscontactsphones-'+existingX+'-'+existingY+'-phoneext')
        extEle.attr('id','clientscontactsphones-'+contactsTrNo+'-'+newRowNo+'-phoneext');
        extEle.attr('name','ClientsContactsPhones['+contactsTrNo+']['+newRowNo+'][PhoneExt]');
        extEle.parent().closest('div').removeClass('field-clientscontactsphones-'+existingX+'-'+existingY+'-phoneext').addClass('field-clientscontactsphones-'+contactsTrNo+'-'+newRowNo+'-phoneext');

        var typeEle = $('#clientscontactsphones-'+existingX+'-'+existingY+'-phonetypeid')
        typeEle.attr('id','clientscontactsphones-'+contactsTrNo+'-'+newRowNo+'-phonetypeid');
        typeEle.attr('name','ClientsContactsPhones['+contactsTrNo+']['+newRowNo+'][PhoneTypeId]');
        typeEle.parent().closest('div').removeClass('field-clientscontactsphones-'+existingX+'-'+existingY+'-phonetypeid').addClass('field-clientscontactsphones-'+contactsTrNo+'-'+newRowNo+'-phonetypeid');
    }

Open in new window

I'd love to learn if there is a more efficient or better way of handling this type of issue. I'm a novice at jQuery so very willing to listen and learn!

Daniel Pineault

ASKER

Never mind Norrie. Because there is an error in the original developer's code, mine now never fires, so it doesn't allow me to correct his mistake. Back to the drawing board!

ASKER CERTIFIED SOLUTION

Zakaria Acharki

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Daniel Pineault

ASKER

Zakaria,

Thank you for taking the time to answer and teaching me some new tricks. I didn't know you could use RegEx in that manner with jQuery. This is great.

Zakaria Acharki

You're welcome Daniel, Glad we could help.