Extract html elements id with value from a string in ASP.NET Core-CodePudding

I have a string which has the data of an html table with rows and column.

Each td has its unique id and values.

Now I need to extract the id with value of that id from that string.

String value:

<table id="tblProducts" width="100%" border="1" style="text-align:center">
    <tbody>
        <tr>
            <td>
                <input style="width:100%; text-align:center" id="slNo" maxlength="100" value="1" readonly="">
            </td>
            <td>
                <textarea style="width: 100%; text-align: center" id="Description">TEST</textarea > 
            </td>
            <td>
                <textarea style="width: 100%; text-align: center" id="Specification">UU</textarea > 
            </td>
            <td>
                <input style="width: 100%; text-align: center" id="HSNCode" value="uuu">
            </td>
            <td>
                <input style="width: 100%; text-align: center" id="Unit" value="ii">
            </td>
            <td>
                <input type="number" style="width: 100%; text-align: center" id="Qty" onchange="calculateValue(this)" value="33">
            </td>
            <td>
                <input type="number" style="width: 100%; text-align: center" id="Rate" onchange="calculateValue(this)" value="33">
            </td>
            <td>
                <input style="width: 100%; text-align: center" id="Value"  readonly="" value="1089">
            </td>
            <td>
                <button type="button"  title="Delete" onclick="deleteRow()">
                    <span  aria-hidden="true"></span>
                </button>
            </td>
        </tr>
        <tr>
                              <td>
                                  <input style="width:100%; text-align:center" id="slNo_2" maxlength="100" value="2" readonly="">
                              </td>
                              <td>
                                  <textarea style="width: 100%; text-align: center" id="Description_2">UU</textarea > 
                              </td>
                              <td>
                                  <textarea style="width: 100%; text-align: center" id="Specification_2">TEST</textarea > 
                              </td>
                              <td>
                                  <input style="width: 100%; text-align: center" id="HSNCode_2" value="uu">
                              </td>
                              <td>
                                  <input style="width: 100%; text-align: center" id="Unit_2" value="uu">
                              </td>
                              <td>
                                  <input type="number" style="width: 100%; text-align: center" id="Qty_2" onchange="calculateValue(this)" value="33">
                              </td>
                              <td>
                                  <input type="number" style="width: 100%; text-align: center" id="Rate_2" onchange="calculateValue(this)" value="33">
                              </td>
                              <td>
                                  <input style="width: 100%; text-align: center" id="Value_2"  readonly="" value="1089">
                              </td>
                              <td>
                                  <button type="button"  title="Delete" onclick="deleteRow()">
                                      <span  aria-hidden="true"></span>
                                  </button>
                              </td>
                          </tr>

                      </tbody></table>

I need to get

id = "slNo" value = "1"
id = "Description" value = "TEST"

Thanks in advance

CodePudding user response：

You can try this:

const table = document.querySelectorAll('#tblProducts input, textarea')
let array = [];

function createArrayOfInputElements() {
  table.forEach(ele => {
    array.push({
      "id": ele.id,
      "value": ele.value.trim()
    })
  })
}

function print() {
  createArrayOfInputElements()
  console.log(array)
}

print();

<table id="tblProducts" width="100%" border="1" style="text-align:center">
  <tbody>
    <tr>
      <td>
        <input style="width:100%; text-align:center" id="slNo" maxlength="100" value="1" readonly="">
      </td>
      <td>
        <textarea style="width: 100%; text-align: center" id="Description">TEST</textarea>
      </td>
      <td>
        <textarea style="width: 100%; text-align: center" id="Specification">UU</textarea>
      </td>
      <td>
        <input style="width: 100%; text-align: center" id="HSNCode" value="uuu">
      </td>
      <td>
        <input style="width: 100%; text-align: center" id="Unit" value="ii">
      </td>
      <td>
        <input type="number" style="width: 100%; text-align: center" id="Qty" onchange="calculateValue(this)" value="33">
      </td>
      <td>
        <input type="number" style="width: 100%; text-align: center" id="Rate" onchange="calculateValue(this)" value="33">
      </td>
      <td>
        <input style="width: 100%; text-align: center" id="Value"  readonly="" value="1089">
      </td>
      <td>
        <button type="button"  title="Delete" onclick="deleteRow()">
          <span  aria-hidden="true"></span>
        </button>
      </td>
    </tr>
    <tr>
      <td>
        <input style="width:100%; text-align:center" id="slNo_2" maxlength="100" value="2" readonly="">
      </td>
      <td>
        <textarea style="width: 100%; text-align: center" id="Description_2">UU</textarea>
      </td>
      <td>
        <textarea style="width: 100%; text-align: center" id="Specification_2">TEST</textarea>
      </td>
      <td>
        <input style="width: 100%; text-align: center" id="HSNCode_2" value="uu">
      </td>
      <td>
        <input style="width: 100%; text-align: center" id="Unit_2" value="uu">
      </td>
      <td>
        <input type="number" style="width: 100%; text-align: center" id="Qty_2" onchange="calculateValue(this)" value="33">
      </td>
      <td>
        <input type="number" style="width: 100%; text-align: center" id="Rate_2" onchange="calculateValue(this)" value="33">
      </td>
      <td>
        <input style="width: 100%; text-align: center" id="Value_2"  readonly="" value="1089">
      </td>
      <td>
        <button type="button"  title="Delete" onclick="deleteRow()">
          <span  aria-hidden="true"></span>
        </button>
      </td>
    </tr>

  </tbody>
</table>

CodePudding user response：

As far as HTML is based on XML, you can use XmlReader to get the necessary data, like this:

using System.IO;
using System.Xml;

// ...

var stream = new MemoryStream();
var writer = new StreamWriter(stream);
writer.Write("YourHTML");
writer.Close();

// Now we have a stream with your HTML, let's load it into an XmlReader

using (var reader = XmlReader.Create(stream)) {
  while (reader.Read()) {
    if (reader.NodeType == XmlNodeType.Element && reader.Name == "td") { // Finding td elements
      reader.Read(); // Moving to the inner input element

      if (reader.NodeType == XmlNodeType.Element && reader.Name == "input") { // Checking it is what we need
        string? id = reader.GetAttribute("id"); // Getting ID
        string? value = reader.GetAttribute("value"); // Getting value

        // Do what you want to do with ID and value
      }
    }
  }
}

Variable id will be null if there's no id attribute in the input (same with variable value).