使用jquery和c#从span检索数据

时间:2016-07-24 10:48:00

标签: javascript c# jquery html twitter-bootstrap

我正在尝试从td内部的span中检索一些值。我有这个功能:

function reorder() {
    alert("Entrando en reorder");
    strorder = "";
    var totalid = $('#ctl00_ContentPlaceHolder1_grdResultados tr td input').length;
    alert(totalid);
    for (var i = 0; i < totalid; i++) {
      strorder = strorder +$('#ctl00_ContentPlaceHolder1_grdResultados tr td span')[i].text()+"*"+ $('#ctl00_ContentPlaceHolder1_grdResultados tr td input')[i].getAttribute("value") + "|";
      alert("strorder1"); 
    }
    //strorder = window.location.href;
    alert("strorder2");
}

源代码就是这个(代码的一部分):

<table class="table table-hover tablaDimensiones" cellspacing="0" border="0" id="ctl00_ContentPlaceHolder1_grdResultados" style="border-collapse:collapse;">
  <tr>
    <th scope="col">
      <a href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$grdResultados&#39;,&#39;Sort$titulo&#39;)">Título</a>
    </th>
    <th scope="col">Opciones</th>
  </tr>
  <tr>
    <td>
      <span id="ctl00_ContentPlaceHolder1_grdResultados_ctl02_lblTitulo">Dimension1</span>
      <input type="hidden" name="ctl00$ContentPlaceHolder1$grdResultados$ctl02$hdnid" id="ctl00_ContentPlaceHolder1_grdResultados_ctl02_hdnid" value="1" />
    </td>
    <td>
      <a id="ctl00_ContentPlaceHolder1_grdResultados_ctl02_cmdEditar" title="Editar" class="btn btn-default" href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$grdResultados$ctl02$cmdEditar&#39;,&#39;&#39;)">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
      </a>
      &nbsp;
      <a onclick="return confirm(&#39;¿Desea elimnar la dimensión?&#39;);" id="ctl00_ContentPlaceHolder1_grdResultados_ctl02_cmdEliminar" href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$grdResultados$ctl02$cmdEliminar&#39;,&#39;&#39;)">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
      </a>

    </td>
  </tr>
  <tr>

我怎么能这样做?因为这样我没有我想要的东西。此致

3 个答案:

答案 0 :(得分:0)

此代码获取表td中每个范围内的每个文本。

var strorder = "";
var spans=$("table.table").find("td").find("span");
var inputs=$("table.table").find("td").find("input");

for (var i=0; i<spans.length; i++){
   strorder+=$(spans[i]).text()+"*"+$(inputs[i]).val()+"|";
}

或没有第二个数组:

var strorder = "";
var spans=$("table.table").find("td").find("span");

for (var i=0; i<spans.length; i++){
   var $span=$(spans[i]); //temporary jquery object
   strorder+=$span.text()+"*"+$span.next().val()+"|"; //$span.next() ==input
}

PS。不需要将array.length保存到 totalid ,因为长度属性不是方法,因此获取循环长度是最佳解决方案。

答案 1 :(得分:0)

这可能是乐观的

 $td = $('.tablaDimensiones tr td');

        var spans = $td.find('span');
        var inps = $td.find('input');

        var len = spans.length;

        var sortorder = "";

        for (var i = 0; i < len; i++) {
            sortorder += spans.eq(i).text() + "*" + inps.eq(i).text() + "|";             
        }

答案 2 :(得分:0)

我相信以下示例就是您要找的几乎正确的代码,您应该稍微组织一下。

注意:您的代码中唯一的错误是在长行中:

strorder = strorder +$('#ctl00_ContentPlaceHolder1_grdResultados tr td span')[i].text()+"*"+ $('#ctl00_ContentPlaceHolder1_grdResultados tr td input')[i].getAttribute("value") + "|";

希望这有帮助。

&#13;
&#13;
function reorder() {
  var strorder = "";
  var table_spans = $('#ctl00_ContentPlaceHolder1_grdResultados span[id^="ctl00_ContentPlaceHolder1"]');
  var table_inputs = $('#ctl00_ContentPlaceHolder1_grdResultados input');

  for (var i = 0; i < table_inputs.length; i++) 
  {
    var span_text = table_spans.eq(i).text();
    var input_value = table_inputs.eq(i).val();

    strorder +=  span_text + "*" + input_value + "|";
  }
  
  console.log(strorder);
}

reorder();
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<table class="table table-hover tablaDimensiones" cellspacing="0" border="0" id="ctl00_ContentPlaceHolder1_grdResultados" style="border-collapse:collapse;">
  <tr>
    <th scope="col">
      <a href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$grdResultados&#39;,&#39;Sort$titulo&#39;)">Título</a>
    </th>
    <th scope="col">Opciones</th>
  </tr>
  <tr>
    <td>
      <span id="ctl00_ContentPlaceHolder1_grdResultados_ctl02_lblTitulo">Dimension1</span>
      <input type="hidden" name="ctl00$ContentPlaceHolder1$grdResultados$ctl02$hdnid" id="ctl00_ContentPlaceHolder1_grdResultados_ctl02_hdnid" value="1" />
    </td>
    <td>
      <a id="ctl00_ContentPlaceHolder1_grdResultados_ctl02_cmdEditar" title="Editar" class="btn btn-default" href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$grdResultados$ctl02$cmdEditar&#39;,&#39;&#39;)">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
      </a>
      &nbsp;
      <a onclick="return confirm(&#39;¿Desea elimnar la dimensión?&#39;);" id="ctl00_ContentPlaceHolder1_grdResultados_ctl02_cmdEliminar" href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$grdResultados$ctl02$cmdEliminar&#39;,&#39;&#39;)">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
      </a>

    </td>
  </tr>
</table>
&#13;
&#13;
&#13;