-3

This code is from http://jsfiddle.net/EuyB8/

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type="text/css">
    #TemplateRow { display:none; }

table, tr, td, th { border: solid thin black; padding: 5px; }

  </style>



<script type="text/javascript">//<![CDATA[ 

$(function() {
    //attach the a function to the click event of the "Add Box Attribute button that will add a new row
    $('#AddAttr').click(function() {
        //clone the template row, and all events attached to the row and everything in it
        var $newRow = $('#TemplateRow').clone(true);

        //strip the IDs from everything to avoid DOM issues
        $newRow.find('*').andSelf().removeAttr('id');

        //add the cloned row to the table immediately before the last row
        $('#BoxTable tr:last').before($newRow);

        //to prevent the default behavior of submitting the form
        return false;
    });

    //attach a remove row function to all current and future instances of the "remove row" check box
    $('#DeleteBoxRow').click(function() {
        //find the closest parent row and remove it
        $(this).closest('tr').remove();
    });

    //finally, add an initial row by simulating the "Add Box Attribute" click
    $('#AddAttr').click();
});

//]]>  

</script>


</head>
<body>
  <table id="BoxTable">
    <tbody><tr>
        <th>Name</th>
        <th>Nationality</th>
        <th>Relationship</th>
        <th>Date of Birth</th>
    </tr>
    <tr id="TemplateRow">
        <td>
            <select name="BoxName" id="BoxName">
                <option selected="selected" value="attr1">attr1</option>
                <option value="attr2">attr2</option>
                <option value="attr3">attr3</option>

            </select>
        </td>
        <td>
            <select name="BoxComparison" id="BoxComparison">
                <option selected="selected" value="=">=</option>
                <option value=">">&gt;</option>
                <option value="<">&lt;</option>
                <option value="Like">Like</option>
                <option value="!=">!=</option>
            </select>
        </td>
        <td>
            <input name="BoxVal" id="BoxVal" type="text">
        </td>
        <td>
            <input id="DeleteBoxRow" name="DeleteBoxRow" type="checkbox">
        </td>
    </tr>
   <tr>
        <td colspan="4"> 
            <input name="AddAttr" value="Add Box Attribute" id="AddAttr" type="submit">
        </td>
    </tr>
</tbody></table>
</body>

How can I get all the values of all the generated rows and put them in a c# array?

4

1 回答 1

1

I have a solution for you but in my oppinion its a bit hacky. Since you are mentioning c# I assume you are working on a ASP.NET application. If that's right here is one way to do it:

First place a invisible textbox control on your page. The important thing here is that you hide it by css. If you set the visible property to false it wont be on your page and you cant sore anything in it.

Once the textbox is added you make a new jquery function which adds the value of your rows into the hidden textbox control. You can eiter do it with a mousedown event on your 'submit'-button or you can do it on the go with a 'changing'-event.

The last thing you have to do is that you have to add separators to the row values that you can split them back into an array in c#.

The value of the textbox control will look like this in the end:

ValueRow1|ValueRow2|ValueRow3

Back in c# its easy to split the value into an array:

string[] myArr = textbox1.Text.Split('|');
于 2013-10-07T06:43:31.390 回答