Question

此代码来自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>

如何获取所有生成的行的所有值并将它们放在c＃数组中？

Answer 1

我有一个解决方案，但在我看来它有点hacky。因为你提到c＃我假设你正在使用ASP.NET应用程序。如果这就是一种方法：

首先在页面上放置一个不可见的文本框控件。这里重要的是你用css隐藏它。如果将visible属性设置为false，它将不在您的页面上，并且您不能在其中发生任何疼痛。

添加文本框后，您可以创建一个新的jquery函数，该函数会将行的值添加到隐藏的文本框控件中。您可以在“提交”按钮上使用mousedown事件进行操作，也可以随时随地进行“更改”事件。

您要做的最后一件事是您必须将分隔符添加到行值，您可以将它们拆分回c＃中的数组。

文本框控件的值最终会如下所示：

ValueRow1|ValueRow2|ValueRow3

回到c＃，很容易将值拆分成数组：

string[] myArr = textbox1.Text.Split('|');

从克隆元素中获取值

1 个答案: