Hello everyone,
I make some simple custom field plugin. The field consists of a table with two columns in which you can add and remove rows. So, I have made button in edit.vm which have to add rows to table, like this:
<input value="Нажми меня" id = "buttonAdd" type="button" onclick=add()>
And it works, but I need to give each new cell its own unique id and I choose jQuery to do it. I made this script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
var $ = jQuery;
$(function () {
$("#buttonAdd").click(function () {
$("#mainTab").append("<tr><td> <input type='text' name='2' value='' /> </td> <td><input type='text' name='3' value='' /> </td></tr>")
});
})
</script>
<input value="Нажми меня" id = "buttonAdd" type="button">
It also work, you can see here, but it doesn’t work in Jira. Also I made another code whith jquery and onclick, it looks terrible but does the job:
<input value="Нажми меня" id = "buttonAdd" onclick='$("<tr><td><input type=\"text\" name=\"first_name2\" /></td><td><input type=\"text\" name=\"last_name2\"</td></tr>").appendTo($("#myTable"));' type="button">
But I still don’t know how give id to cells here. So the question is how to make jQuery work or how to make a unique id for every new cell in a table without jQuery. I’m new to web development and especially JS. I will be happy if you help me.
Alexander
P.S. The whole code of edit.vm:
#customControlHeader ($action $customField.id $customField.name $fieldLayoutItem.required $displayParameters $auiparams)
#set ($field_uid = $customField.id)
<table id='mainTab'>
## All input elements for this custom field should have a name of
## $customField.id but each id should be unique
<tr width="15%">
<td>
Amount
</td>
<td>
Note
</td>
</tr>
#if ($value)
#if ($issue.getKey())
## issue exists and has a key so the value is a transport of string values,
## not a transport object of the singular objects. We want more than just
## strings so access the transport object directly from the customfield
#set ($carriers = $customField.getValue($issue))
#else
## When this template is used to edit a default value then
## issue is a dummy with no key. Access the transport object via
## the configs variable.
#set ($carriers = $configs.get("default"))
#end
#foreach ($carrier in $carriers)
<tr width="15%">
<td>
<input id="${field_uid}-amount-${velocityCount}"
name="${field_uid}"
type="text"
value="$carrier.getAmount()" />
</td>
<td>
<input id="${field_uid}-note-${velocityCount}"
name="${field_uid}"
type="text"
value="$textutils.htmlEncode($carrier.getNote())" />
</td>
</tr>
#end
#end
</table>
##let nodet = document.createElement('tr');
##let node = document.createElement('td');
##let node2 = document.createElement('td');
## node.innerHTML = "<input type='text' + name=\'+'tt'>";
##node2.innerHTML = "<input type='text' name='2'>";
##nodet.appendChild(node);
## nodet.appendChild(node2);
##document.getElementById('mainTab').appendChild(nodet);
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
var $ = jQuery;
$(function () {
$("#buttonAdd").click(function () {
$("#mainTab").append("<tr><td> <input type='text' name='2' value='' /> </td> <td><input type='text' name='3' value='' /> </td></tr>")
});
})
</script>
<input value="Нажми меня" id = "buttonAdd" onclick='$("<tr><td><input type=\"text\" name=\"first_name2\" /></td><td><input type=\"text\" name=\"last_name2\"</td></tr>").appendTo($("#myTable"));' type="button">
#customControlFooter ($action $customField.id $fieldLayoutItem.fieldDescription $displayParameters $auiparams)