change two element(including the position and some attribute) with jquery

Question

Hi: In my jsp page,I have a form to add/update a nested object using struts tags,

First,here is an example which show what I am trying to do: http://jsfiddle.net/mbwwg/

this is the code:

<table>
    <tr>
        <th>Step Name</th>
        <th>Step Operators</th>
        <th>Step Status</th>
        <th>Set the order</th>
    </tr>
    <tr>
        <td><s:textfield name="task.steps[0].name"/></td>
        <td>
            <s:select list="allOpInDb" listKey="id" listValue="name" multiple="true" name="task.steps[0].id" />
        </td>
        <td>
            <!-- Here,I do not know hwo to list the Status with the radio button -->
            <s:radio list="xx" name="task.steps[0].status" />
        </td>
        <td> up <br> down</td>
    </tr>
    <!-- step02 -->
    <tr>
        <td><s:textfield name="task.steps[1].name"/></td>
        <td>
            <s:select list="allOpInDb" listKey="id" listValue="name" multiple="true" name="task.steps[1].id" />
        </td>
        <td>
            <s:radio list="xx" name="task.steps[1].status" />
        </td>
    </tr>
    <td> up <br> down</td>
</table>

In the table,there are two rows (step01,and step02),they will be changed to the elements of an ArrayList by struts2 in the server side.

The realted classed:

class Task{
    private int id;
    private String name;
    private List<TaskStep> steps;  //the required steps to complete this task

}


class TaskStep{
    private int id;
    private String name;
    private List<Operator> operators;  //the operator who will directly do this job

}
class TaskAction extends ActionSupport{
    private int taskid;
    private Task task;
///
}

Now I want the user can change the order of the steps in the page(for example,move up or down a step),and when the two row exchanged,the realated attribute should be change accordingly,take the first row for example:

    <tr>
        <td><s:textfield name="task.steps[0].name"/></td>
        <td>
            <s:select list="allOpInDb" listKey="id" listValue="name" multiple="true" name="task.steps[0].id" />
        </td>
        <td>

            <s:radio list="xx" name="task.steps[0].status" />
        </td>
        <td> up <br> down</td>
    </tr>

When this row is moved down,so all "name" attribute of its input type shoulde be changed from "task.steps[0].xxx" to "task.steps[1].xxx",and vice versa. Since the steps of the step are ordered.

So I thougth using javascirpt,and jquery is my first choice ,is there plugin can make this ?

score 1 · Accepted Answer · edited May 23 '17 at 11:47

This question has an answer that explains how to wire up your table with jQuery to make your up and down links work. You can also take a look at the jQuery sortable plugin.

These will help you get your rows moving around but you also want to update your name attribute. You could do that using $('XXX').attr('name') to exchange the attributes of the two rows - the one that was moved and the one that was displaced.

change two element(including the position and some attribute) with jquery

1 Answers1