Modify table

JavaScript
1

I have a javascript var temp ;

var temp= “<table><tr><td><input type=“text” name=“source0” value=”" /></td></tr></table>" ;

I want to modify the contents of temp. I want to modify the value of “name” field . ( // red marked)

How to modify the contents of temp variable ?

I want an output:
temp= “<table><tr><td><input type=“text” name=“source1” value=”" /></td></tr></table>" ;

Looking for a jquery solution.

2

Per the jQuery docs: http://api.jquery.com/attribute-equals-selector/

$(‘input[name=“source0”]’).attr(‘name’, ‘source1’);

3

Thanks. But that is not going to work. Thats because I can not use that on a temp variable …Can we ? How ?

You got confused. Could you please go through my question again…more specifically input and output.

Here is once again my desired input and output …I want something like this …

input:
var temp= “<table><tr><td><input type=“text” name=“source0” value=”" /></td></tr></table>" ;

output:
var temp= “<table><tr><td><input type=“text” name=“source1” value=”" /></td></tr></table>" ;

4

If you just want to modify the temp var:


var temp = '<table><tr><td><input type="text" name="source0" value="" /></td></tr></table>';
if (temp.indexOf('source0') !== -1) {
    temp = temp.replace('source0', 'source1');
}

Nothing needed for jQuery.

But, if you already put the temp var in the DOM, now we can use the jQuery solution above:


<form></form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		var temp = '<table><tr><td><input type="text" name="source0" value="" /></td></tr></table>';

		$('form').append(temp);
		$('input[name="source0"]').attr('name', 'source1'); 
	});
</script>
5

first approach looks OK.

second approach is not acceptable. because , I’m planning to use this for a dynamic row creation kind of staff . that requires target names to be different than source names. If I follow your second approach, then that will alter the name of source name also.

I am planning to create a dynamic row addition in a table. but those will have input text box, select box in them. I want to make sure that all those elements gets different names and ids.

do you have a better code ?

6

Tables have their own set of DOM commands for adding, updating, and deleting table elements.

You should never need to put HTML tags in your JavaScript if you are intending to update the DOM. You can only ever use HTML tags in code that you are going to insert into the web page using innerHTML where you will never need to update parts of it afterwards. You can’t use innerHTML on parts of a table and so to update parts of a table you either need to use the general DOM calls or the table specific ones.

See http://javascriptexample.net/domtable.php for some info on the DOM table commands.

7

Great, now I can’t say ‘do you have a better explanation of what you need?’ now can I?

do you have a better code ?

Where is code that you are attempting now?